:root {
  --primary-color: hsl(15, 78%, 55%);
  --secondary-color: hsl(111, 62%, 42%);
  --bg-color: hsl(20, 6%, 10%);
  --text-color: hsl(15, 8%, 88%);
  --text-muted: hsl(15, 6%, 56%);
  --border-color: hsla(15, 10%, 80%, 0.1);
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 4px hsla(0, 0%, 0%, 0.2);
  --shadow-md: 0 4px 16px hsla(0, 0%, 0%, 0.28);
  --shadow-lg: 0 10px 40px hsla(0, 0%, 0%, 0.35);
  --nav-height: 64px;
  --max-width: 1200px;
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --nav-bg: var(--bg-color);
  --nav-border: var(--border-color);
  --btn-text: #ffffff;
  --wps-primary: hsl(15, 78%, 55%);
  --wps-primary-dark: hsl(15, 78%, 42%);
  --wps-secondary: hsl(111, 62%, 55%);
  --wps-secondary-dark: hsl(111, 62%, 40%);
  --wps-text: hsl(15, 10%, 12%);
  --wps-text-muted: hsl(15, 8%, 40%);
  --wps-bg: hsl(15, 7%, 95%);
  --wps-bg-dark: hsl(15, 10%, 8%);
  --wps-bg-card: hsl(0, 0%, 100%);
  --wps-border: hsl(15, 6%, 85%);
  --wps-gradient-hero: linear-gradient(160deg, hsl(15, 12%, 10%) 0%, hsl(15, 20%, 18%) 50%, hsl(15, 30%, 22%) 100%);
  --wps-gradient-cta: linear-gradient(135deg, var(--wps-primary) 0%, hsl(25, 85%, 58%) 100%);
  --wps-font-serif: "Noto Serif SC", Georgia, serif;
  --wps-font-sans: "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
  --wps-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --wps-shadow-md: 0 4px 16px rgba(0,0,0,0.1);
  --wps-shadow-lg: 0 8px 32px rgba(0,0,0,0.14);
  --wps-shadow-xl: 0 16px 48px rgba(0,0,0,0.18);
  --wps-surface: #ffffff;
  --wps-surface-alt: hsl(15, 5%, 91%);
  --wps-muted: hsl(15, 6%, 45%);
  --wps-dark: hsl(15, 12%, 10%);
  --wps-dark-surface: hsl(15, 10%, 15%);
  --wps-gradient-primary: linear-gradient(135deg, hsl(15, 78%, 55%), hsl(25, 85%, 50%));
  --wps-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --wps-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --feat-primary: hsl(15, 78%, 55%);
  --feat-primary-dark: hsl(15, 78%, 42%);
  --feat-secondary: hsl(111, 62%, 55%);
  --feat-secondary-dark: hsl(111, 62%, 40%);
  --feat-text: hsl(15, 10%, 12%);
  --feat-text-light: hsl(15, 8%, 40%);
  --feat-bg: hsl(15, 7%, 95%);
  --feat-bg-dark: hsl(220, 25%, 10%);
  --feat-bg-card: hsl(0, 0%, 100%);
  --feat-border: hsl(15, 10%, 88%);
  --feat-gradient-warm: linear-gradient(135deg, hsl(15, 78%, 55%), hsl(30, 85%, 58%));
  --feat-gradient-cool: linear-gradient(135deg, hsl(220, 60%, 50%), hsl(260, 55%, 55%));
  --feat-gradient-green: linear-gradient(135deg, hsl(111, 62%, 45%), hsl(150, 55%, 50%));
  --feat-serif: "Playfair Display", Georgia, "Songti SC", serif;
  --feat-sans: "Inter", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --page-primary: hsl(15, 78%, 55%);
  --page-primary-dark: hsl(15, 78%, 42%);
  --page-secondary: hsl(111, 62%, 55%);
  --page-secondary-dark: hsl(111, 62%, 40%);
  --page-text: hsl(15, 10%, 12%);
  --page-bg: hsl(15, 7%, 95%);
  --page-surface: #ffffff;
  --page-surface-alt: hsl(15, 5%, 91%);
  --page-border: hsl(15, 8%, 85%);
  --page-muted: hsl(15, 6%, 52%);
  --page-dark: hsl(220, 18%, 12%);
  --page-dark-surface: hsl(220, 16%, 16%);
  --page-radius: 2px;
  --page-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
  --page-shadow-lg: 0 4px 16px rgba(0,0,0,0.1), 0 12px 40px rgba(0,0,0,0.06);
  --guide-primary: hsl(15, 78%, 55%);
  --guide-primary-dark: hsl(15, 78%, 42%);
  --guide-secondary: hsl(111, 62%, 55%);
  --guide-secondary-dark: hsl(111, 62%, 40%);
  --guide-text: hsl(15, 10%, 12%);
  --guide-text-light: hsl(15, 8%, 40%);
  --guide-bg: hsl(15, 7%, 95%);
  --guide-bg-dark: hsl(220, 18%, 10%);
  --guide-bg-card: hsl(220, 16%, 14%);
  --guide-bg-card-hover: hsl(220, 16%, 18%);
  --guide-surface: hsl(220, 14%, 12%);
  --guide-border: hsl(220, 12%, 22%);
  --guide-text-on-dark: hsl(0, 0%, 94%);
  --guide-text-muted: hsl(220, 8%, 58%);
  --guide-accent-glow: hsla(15, 78%, 55%, 0.15);
  --guide-step-line: hsl(220, 12%, 20%);
  --tpl-primary: hsl(15, 78%, 55%);
  --tpl-primary-dark: hsl(15, 78%, 42%);
  --tpl-secondary: hsl(111, 62%, 55%);
  --tpl-secondary-dark: hsl(111, 62%, 40%);
  --tpl-text: hsl(15, 10%, 12%);
  --tpl-text-muted: hsl(15, 8%, 40%);
  --tpl-bg: hsl(15, 7%, 95%);
  --tpl-bg-alt: hsl(15, 5%, 91%);
  --tpl-surface: #ffffff;
  --tpl-border: hsl(15, 6%, 85%);
  --tpl-hero-gradient: linear-gradient(135deg, hsl(15, 10%, 12%) 0%, hsl(15, 15%, 22%) 100%);
  --tpl-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --tpl-font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --changelog-primary: hsl(15, 78%, 55%);
  --changelog-secondary: hsl(111, 62%, 55%);
  --changelog-text: hsl(15, 10%, 12%);
  --changelog-bg: hsl(15, 7%, 95%);
  --changelog-surface: hsl(0, 0%, 100%);
  --changelog-surface-alt: hsl(15, 5%, 91%);
  --changelog-border: hsl(15, 8%, 85%);
  --changelog-muted: hsl(15, 6%, 52%);
  --changelog-tag-new: hsl(111, 62%, 42%);
  --changelog-tag-fix: hsl(15, 78%, 50%);
  --changelog-tag-perf: hsl(220, 65%, 50%);
  --changelog-tag-security: hsl(280, 55%, 50%);
  --changelog-dark: hsl(15, 12%, 10%);
  --changelog-dark-surface: hsl(15, 8%, 15%);
  --faq-primary: hsl(15, 78%, 55%);
  --faq-primary-dark: hsl(15, 78%, 42%);
  --faq-secondary: hsl(111, 62%, 55%);
  --faq-secondary-dark: hsl(111, 62%, 40%);
  --faq-text: hsl(15, 10%, 12%);
  --faq-text-muted: hsl(15, 8%, 40%);
  --faq-bg: hsl(15, 7%, 95%);
  --faq-surface: hsl(0, 0%, 100%);
  --faq-surface-alt: hsl(15, 5%, 92%);
  --faq-border: hsl(15, 6%, 85%);
  --faq-border-light: hsl(15, 6%, 90%);
  --faq-dark: hsl(15, 12%, 10%);
  --faq-dark-surface: hsl(15, 10%, 15%);
  --faq-accent-blue: hsl(220, 70%, 55%);
  --faq-accent-purple: hsl(260, 60%, 58%);
  --faq-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --faq-shadow-md: 0 4px 16px rgba(0,0,0,0.1);
  --faq-shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
}

    body {
    padding-top: var(--nav-height);
    }
    
    .ember_drift {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    }
    
    .joltWave {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-width);
    height: 100%;
    margin: 0 auto;
    padding: 0 28px;
    }
    
    .mosaic {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    }
    .flicker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--primary-color), hsl(25, 85%, 60%));
    color: #1a1a2e;
    font-family: "Georgia", serif;
    font-size: 17px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    }
    .blotch {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.5px;
    }
    
    .lx5 {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .sable {
    position: relative;
    }
    .gn2p {
    display: block;
    padding: 8px 14px;
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    letter-spacing: 0.2px;
    }
    .gn2p:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.08);
    }
    
    .prism {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    background: linear-gradient(135deg, var(--primary-color), hsl(8, 75%, 50%));
    color: var(--btn-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 10px hsla(15, 78%, 55%, 0.35);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.3px;
    }
    .prism:hover {
    background: linear-gradient(135deg, hsl(15, 82%, 48%), hsl(8, 80%, 44%));
    box-shadow: 0 4px 18px hsla(15, 78%, 55%, 0.5);
    transform: translateY(-1px);
    }
    .prism:active {
    transform: translateY(0);
    box-shadow: 0 1px 6px hsla(15, 78%, 55%, 0.3);
    }
    .xr9 {
    font-size: 13px;
    line-height: 1;
    }
    .fathom {
    width: 100%;
    justify-content: center;
    padding: 14px 22px;
    font-size: 15px;
    }
    
    .dwq8 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: 1px solid var(--nav-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    }
    .dwq8:hover {
    background: hsla(15, 10%, 80%, 0.08); color: #1a1a2e;}
    .tandem_hue {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 1px;
    transition: var(--transition);
    }
    
    .vortex {
    display: none;
    position: fixed;
    inset: 0;
    background: hsla(0, 0%, 0%, 0.55);
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.3s ease;
    }
    .vortex.is-active {
    display: block;
    opacity: 1;
    }
    
    .zephyr {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: hsl(20, 6%, 12%);
    border-left: 1px solid var(--nav-border);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-lg);
    }
    .zephyr.is-open {
    transform: translateX(0);
    }
    .pylon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: var(--nav-height);
    border-bottom: 1px solid var(--nav-border);
    flex-shrink: 0;
    }
    .rumble_fox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: 1px solid var(--nav-border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
    }
    .rumble_fox:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.08);
    }
    .cobalt {
    list-style: none;
    margin: 0;
    padding: 12px 0;
    flex: 1;
    overflow-y: auto;
    }
    .quirk {
    margin: 0;
    }
    .cragMist {
    display: block;
    padding: 14px 24px;
    font-size: 15px;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    border-left: 3px solid transparent;
    }
    .cragMist:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.06);
    border-left-color: var(--primary-color);
    }
    .kv3 {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--nav-border);
    flex-shrink: 0;
    }
    
    @media (max-width: 960px) {.lx5 {
    display: none;
    }
    .prism:not(.nav-cta--full) {
    display: none;
    }
    .dwq8 {
    display: flex;
    }}

    .dwq8.is-active .tandem_hue:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    }
    .dwq8.is-active .tandem_hue:nth-child(2) {
    opacity: 0;
    }
    .dwq8.is-active .tandem_hue:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    }
    .gn2p.active {color: #1a1a2e; background: hsla(15, 10%, 80%, 0.08);}
    .cragMist.active {color: #1a1a2e; background: hsla(15, 10%, 80%, 0.06); border-left-color: var(--primary-color);}
    @import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=Noto+Sans+SC:wght@400;500;600;700&display=swap");
    main.index *{ margin: 0; padding: 0; box-sizing: border-box; }
    main.index{
    font-family: var(--wps-font-sans);
    color: var(--wps-text);
    background: var(--wps-bg);
    overflow-x: hidden;
    }
    
    main.index .wyvern{
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wps-gradient-hero);
    overflow: hidden;
    }
    main.index .wyvern::before{
    content: "";
    position: absolute;
    top: -30%;
    right: -10%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, hsla(15, 78%, 55%, 0.15) 0%, transparent 70%);
    pointer-events: none;
    }
    main.index .wyvern::after{
    content: "";
    position: absolute;
    bottom: -20%;
    left: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, hsla(111, 62%, 55%, 0.1) 0%, transparent 70%);
    pointer-events: none; color: #1a1a2e;}
    main.index .zenith{
    position: relative;
    z-index: 2;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 120px 32px 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    }
    main.index .peakIron{
    color: #fff;
    }
    main.index .blazeThorn{
    display: inline-block;
    padding: 6px 16px;
    background: hsla(15, 78%, 55%, 0.2);
    border: 1px solid hsla(15, 78%, 55%, 0.4);
    color: hsl(15, 78%, 70%);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
    }
    main.index .wyvern h1{
    font-family: var(--wps-font-serif);
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
    }
    main.index .wyvern h1 span{
    display: block;
    background: var(--wps-gradient-cta);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    }
    main.index .quilt_dye{
    font-size: 17px;
    line-height: 1.7;
    color: hsla(0, 0%, 100%, 0.7);
    margin-bottom: 36px;
    max-width: 480px;
    }
    main.index .qm6{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    }
    main.index .basalt{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 36px;
    background: var(--wps-gradient-cta);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 20px hsla(15, 78%, 55%, 0.4);
    }
    main.index .basalt:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 28px hsla(15, 78%, 55%, 0.55);
    }
    main.index .bloom_arc{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 36px;
    background: hsla(0, 0%, 100%, 0.08);
    color: #1a1a2e;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid hsla(0, 0%, 100%, 0.2);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    }
    main.index .bloom_arc:hover{
    background: hsla(0, 0%, 100%, 0.14);
    border-color: hsla(0, 0%, 100%, 0.35); color: #1a1a2e;}
    main.index .velvet_ash{
    position: relative;
    }
    main.index .velvet_ash img{
    width: 100%;
    height: auto;
    display: block;
    box-shadow: var(--wps-shadow-xl);
    border: 1px solid hsla(0, 0%, 100%, 0.08);
    }
    main.index .velvet_ash::before{
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, hsla(15, 78%, 55%, 0.3), transparent 50%);
    z-index: -1;
    }
    main.index .jn4{
    display: flex;
    gap: 40px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid hsla(0, 0%, 100%, 0.1);
    }
    main.index .cruxFold{
    font-family: var(--wps-font-serif);
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    }
    main.index .fossil_bay{
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.5);
    margin-top: 4px;
    }
    
    main.index .aurora{
    padding: 100px 32px;
    max-width: 1200px;
    margin: 0 auto;
    }
    main.index .rune_spark{
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--wps-primary);
    margin-bottom: 12px;
    }
    main.index .yt7{
    font-family: var(--wps-font-serif);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    color: var(--wps-text);
    margin-bottom: 16px;
    letter-spacing: -0.3px;
    }
    main.index .duskOrb{
    font-size: 16px;
    color: var(--wps-text-muted);
    line-height: 1.6;
    max-width: 560px;
    margin-bottom: 56px;
    }
    main.index .cascade{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    }
    main.index .uw8{
    background: var(--wps-bg-card);
    border: 1px solid var(--wps-border);
    padding: 36px 28px;
    transition: transform 0.25s, box-shadow 0.25s;
    position: relative;
    overflow: hidden;
    }
    main.index .uw8::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--wps-gradient-cta);
    opacity: 0;
    transition: opacity 0.25s;
    }
    main.index .uw8:hover{
    transform: translateY(-4px);
    box-shadow: var(--wps-shadow-lg);
    }
    main.index .uw8:hover::before{
    opacity: 1;
    }
    main.index .quarry{
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(15, 78%, 55%, 0.08);
    margin-bottom: 20px;
    font-size: 22px;
    }
    main.index .uw8:nth-child(2) .quarry{ background: hsla(111, 62%, 45%, 0.08); }
    main.index .uw8:nth-child(3) .quarry{ background: hsla(220, 70%, 55%, 0.08); }
    main.index .uw8:nth-child(4) .quarry{ background: hsla(280, 60%, 55%, 0.08); }
    main.index .uw8:nth-child(5) .quarry{ background: hsla(45, 80%, 50%, 0.08); color: #1a1a2e;}
    main.index .uw8:nth-child(6) .quarry{ background: hsla(190, 70%, 45%, 0.08); }
    main.index .uw8 h3{
    font-family: var(--wps-font-serif);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--wps-text);
    }
    main.index .uw8 p{
    font-size: 14px;
    line-height: 1.65;
    color: var(--wps-text-muted);
    }
    
    main.index .summit{
    background: var(--wps-bg-dark);
    padding: 100px 32px;
    color: #fff;
    }
    main.index .rx2m{
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    }
    main.index .granite{
    width: 100%;
    height: auto;
    display: block;
    box-shadow: var(--wps-shadow-xl);
    }
    main.index .wt5 .duskOrb{
    color: hsla(0, 0%, 100%, 0.6);
    }
    main.index .plume{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 36px;
    }
    main.index .plume li{
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-size: 15px;
    line-height: 1.6;
    color: hsla(0, 0%, 100%, 0.8);
    }
    main.index .plume li::before{
    content: "✓";
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(111, 62%, 45%, 0.2);
    color: var(--wps-secondary);
    font-size: 13px;
    font-weight: 700;
    }
    main.index .summit .yt7{ color: #fff; }
    
    main.index .cipher{
    padding: 100px 32px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    }
    main.index .cipher .duskOrb{
    margin-left: auto;
    margin-right: auto;
    }
    main.index .claspMoor{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 48px;
    }
    main.index .sprig{
    background: var(--wps-bg-card);
    border: 1px solid var(--wps-border);
    padding: 36px 20px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    }
    main.index .sprig:hover{
    transform: translateY(-3px);
    box-shadow: var(--wps-shadow-md);
    }
    main.index .crestNova{
    font-size: 36px;
    margin-bottom: 16px;
    }
    main.index .sprig h3{
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--wps-text);
    }
    main.index .sprig p{
    font-size: 13px;
    color: var(--wps-text-muted);
    }
    
    main.index .bz3w{
    padding: 100px 32px;
    background: hsl(15, 7%, 92%); color: #1a1a2e;}
    main.index .osprey{
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    }
    main.index .gossamer{
    display: flex;
    flex-direction: column;
    gap: 28px;
    }
    main.index .kindleRay{
    display: flex;
    gap: 20px;
    align-items: flex-start;
    }
    main.index .fable{
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wps-gradient-cta);
    color: #fff;
    font-family: var(--wps-font-serif);
    font-size: 16px;
    font-weight: 900;
    }
    main.index .kindleRay h3{
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--wps-text);
    }
    main.index .kindleRay p{
    font-size: 14px;
    color: var(--wps-text-muted);
    line-height: 1.6;
    }
    main.index .guide-img{
    width: 100%;
    height: auto;
    display: block;
    box-shadow: var(--wps-shadow-lg);
    border: 1px solid var(--wps-border);
    }
    
    main.index .testimonials{
    padding: 100px 32px;
    max-width: 1200px;
    margin: 0 auto;
    }
    main.index .testimonials-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    }
    main.index .testimonial-card{
    background: var(--wps-bg-card);
    border: 1px solid var(--wps-border);
    padding: 32px 28px;
    }
    main.index .testimonial-stars{
    color: hsl(45, 90%, 50%);
    font-size: 16px;
    margin-bottom: 16px;
    letter-spacing: 2px;
    }
    main.index .testimonial-card blockquote{
    font-size: 14px;
    line-height: 1.7;
    color: var(--wps-text-muted);
    margin-bottom: 20px;
    font-style: italic;
    }
    main.index .testimonial-author{
    font-size: 14px;
    font-weight: 700;
    color: var(--wps-text);
    }
    main.index .testimonial-role{
    font-size: 12px;
    color: var(--wps-text-muted);
    margin-top: 2px;
    }
    
    main.index .cta-section{
    padding: 100px 32px;
    background: var(--wps-gradient-hero);
    text-align: center;
    position: relative;
    overflow: hidden;
    }
    main.index .cta-section::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, hsla(15, 78%, 55%, 0.12) 0%, transparent 60%);
    pointer-events: none;
    }
    main.index .cta-inner{
    position: relative;
    z-index: 2;
    max-width: 640px;
    margin: 0 auto;
    }
    main.index .cta-section .yt7{
    color: #fff;
    margin-bottom: 16px;
    }
    main.index .cta-section .duskOrb{
    color: hsla(0, 0%, 100%, 0.6);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    }
    main.index .cta-version{
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.4);
    margin-top: 20px;
    }
    
    main.index .crumb_sol{
    background: hsl(15, 10%, 6%);
    color: hsla(0, 0%, 100%, 0.5);
    padding: 56px 32px 32px;
    }
    main.index .obelisk{
    max-width: 1200px;
    margin: 0 auto;
   
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
    }
    main.index .glintSky{
    font-family: var(--wps-font-serif);
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 12px;
    }
    main.index .footer-desc{
    font-size: 13px;
    line-height: 1.7;
    max-width: 300px;
    }
    main.index .thornDew h4{
    font-size: 13px;
    font-weight: 700;
    color: hsla(0, 0%, 100%, 0.8);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    }
    main.index .thornDew ul{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }
    main.index .thornDew a{
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.5);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.index .thornDew a:hover{
    color: var(--wps-primary);
    }
    main.index .echo_pine{
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 24px;
    border-top: 1px solid hsla(0, 0%, 100%, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    }
    main.index .echo_pine a{
    color: hsla(0, 0%, 100%, 0.5);
    text-decoration: none;
    margin-left: 20px;
    transition: color 0.2s;
    }
    main.index .echo_pine a:hover{
    color: var(--wps-primary);
    }
    
    @media (max-width: 960px) {main.index .zenith{
    grid-template-columns: 1fr;
    padding: 100px 24px 60px;
    gap: 40px;
    }
    main.index .velvet_ash{ order: -1; max-width: 560px; margin: 0 auto; }
    main.index .cascade{ grid-template-columns: repeat(2, 1fr); }
    main.index .rx2m{ grid-template-columns: 1fr; gap: 40px; }
    main.index .claspMoor{ grid-template-columns: repeat(2, 1fr); }
    main.index .osprey{ grid-template-columns: 1fr; gap: 40px; }
    main.index .testimonials-grid{ grid-template-columns: 1fr; }
    main.index .obelisk{ grid-template-columns: 1fr 1fr; gap: 32px; }}
    @media (max-width: 600px) {main.index .cascade{ grid-template-columns: 1fr; }
    main.index .claspMoor{ grid-template-columns: 1fr 1fr; }
    main.index .jn4{ gap: 24px; flex-wrap: wrap; }
    main.index .qm6{ flex-direction: column; }
    main.index .basalt, main.index .bloom_arc{ width: 100%; justify-content: center; }
    main.index .obelisk{ grid-template-columns: 1fr; }
    main.index .echo_pine{ flex-direction: column; gap: 12px; text-align: center; }}
    main.index .crumb_sol{
    background: hsl(20, 8%, 8%);
    border-top: 1px solid var(--border-color, hsla(15, 10%, 80%, 0.1));
    padding: 64px 24px 32px;
    font-family: "Georgia", "Noto Serif SC", serif;
    }
    main.index .obelisk{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    width: 100%;
    }
    main.index .hk9{
    display: flex;
    gap: 64px;
    margin-bottom: 48px;
    }
    main.index .glintSky{
    flex: 0 0 240px;
    }
    main.index .riddle{
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: -0.02em;
    display: block;
    margin-bottom: 12px;
    background: linear-gradient(135deg, var(--primary-color, hsl(15, 78%, 55%)), hsl(30, 85%, 62%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    }
    main.index .vapor_knot{
    font-size: 14px;
    color: var(--text-muted, hsl(15, 6%, 56%));
    line-height: 1.6;
    margin: 0;
    }
    main.index .marrow{
    display: flex;
    flex: 1 1 auto;
    gap: 48px;
    }
    main.index .thornDew{
    flex: 1 1 0;
    }
    main.index .dp4k{
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color, hsl(15, 8%, 88%));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 20px;
    font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
    }
    main.index .anvil{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    }
    main.index .flux_gem{
    line-height: 1;
    }
    main.index .nimbus{
    font-size: 14px;
    color: var(--text-muted, hsl(15, 6%, 56%));
    text-decoration: none;
    transition: var(--transition, all 0.25s cubic-bezier(0.4, 0, 0.2, 1));
    display: inline-block;
    }
    main.index .nimbus:hover{
    color: var(--primary-color, hsl(15, 78%, 55%));
    }
    main.index .vf6{
    height: 1px;
    background: var(--border-color, hsla(15, 10%, 80%, 0.1));
    margin-bottom: 28px;
    }
    main.index .echo_pine{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    }
    main.index .shard_veil{
    font-size: 13px;
    color: var(--text-muted, hsl(15, 6%, 56%));
    margin: 0;
    flex: 1 1 auto;
    font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
    }
    main.index .trellis{
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    }
    main.index .driftElm{
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, 6px);
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.06);
    transition: var(--transition, all 0.25s cubic-bezier(0.4, 0, 0.2, 1));
    text-decoration: none;
    }
    main.index .driftElm:hover{
    color: var(--primary-color, hsl(15, 78%, 55%));
    background: hsla(15, 78%, 55%, 0.12);
    }
    main.index .pixel_fen{
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    }
    @media (max-width: 768px) {main.index .crumb_sol{
    padding: 48px 20px 28px;
    }
    main.index .hk9{
    flex-direction: column;
    gap: 40px;
    }
    main.index .glintSky{
    flex: 0 0 auto;
    }
    main.index .marrow{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    }
    main.index .echo_pine{
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    }}
    @media (max-width: 480px) {main.index .marrow{
    grid-template-columns: 1fr;
    gap: 28px;
    }}

    body {
    padding-top: var(--nav-height);
    }
    
    .ember_drift {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    }
    
    .joltWave {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-width);
    height: 100%;
    margin: 0 auto;
    padding: 0 28px;
    }
    
    .mosaic {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    }
    .flicker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--primary-color), hsl(25, 85%, 60%));
    color: #1a1a2e;
    font-family: "Georgia", serif;
    font-size: 17px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    }
    .blotch {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.5px;
    }
    
    .lx5 {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .sable {
    position: relative;
    }
    .gn2p {
    display: block;
    padding: 8px 14px;
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    letter-spacing: 0.2px;
    }
    .gn2p:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.08);
    }
    
    .prism {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    background: linear-gradient(135deg, var(--primary-color), hsl(8, 75%, 50%));
    color: var(--btn-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 10px hsla(15, 78%, 55%, 0.35);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.3px;
    }
    .prism:hover {
    background: linear-gradient(135deg, hsl(15, 82%, 48%), hsl(8, 80%, 44%));
    box-shadow: 0 4px 18px hsla(15, 78%, 55%, 0.5);
    transform: translateY(-1px);
    }
    .prism:active {
    transform: translateY(0);
    box-shadow: 0 1px 6px hsla(15, 78%, 55%, 0.3);
    }
    .xr9 {
    font-size: 13px;
    line-height: 1;
    }
    .fathom {
    width: 100%;
    justify-content: center;
    padding: 14px 22px;
    font-size: 15px;
    }
    
    .dwq8 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: 1px solid var(--nav-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    }
    .dwq8:hover {
    background: hsla(15, 10%, 80%, 0.08); color: #1a1a2e;}
    .tandem_hue {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 1px;
    transition: var(--transition);
    }
    
    .vortex {
    display: none;
    position: fixed;
    inset: 0;
    background: hsla(0, 0%, 0%, 0.55);
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.3s ease;
    }
    .vortex.is-active {
    display: block;
    opacity: 1;
    }
    
    .zephyr {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: hsl(20, 6%, 12%);
    border-left: 1px solid var(--nav-border);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-lg);
    }
    .zephyr.is-open {
    transform: translateX(0);
    }
    .pylon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: var(--nav-height);
    border-bottom: 1px solid var(--nav-border);
    flex-shrink: 0;
    }
    .rumble_fox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: 1px solid var(--nav-border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
    }
    .rumble_fox:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.08);
    }
    .cobalt {
    list-style: none;
    margin: 0;
    padding: 12px 0;
    flex: 1;
    overflow-y: auto;
    }
    .quirk {
    margin: 0;
    }
    .cragMist {
    display: block;
    padding: 14px 24px;
    font-size: 15px;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    border-left: 3px solid transparent;
    }
    .cragMist:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.06);
    border-left-color: var(--primary-color);
    }
    .kv3 {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--nav-border);
    flex-shrink: 0;
    }
    
    @media (max-width: 960px) {.lx5 {
    display: none;
    }
    .prism:not(.nav-cta--full) {
    display: none;
    }
    .dwq8 {
    display: flex;
    }}

    .dwq8.is-active .tandem_hue:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    }
    .dwq8.is-active .tandem_hue:nth-child(2) {
    opacity: 0;
    }
    .dwq8.is-active .tandem_hue:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    }
    .gn2p.active {color: #1a1a2e; background: hsla(15, 10%, 80%, 0.08);}
    .cragMist.active {color: #1a1a2e; background: hsla(15, 10%, 80%, 0.06); border-left-color: var(--primary-color);}
    @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap");
    main.download *{ margin: 0; padding: 0; box-sizing: border-box; }
    main.download{
    font-family: var(--wps-font-body);
    color: var(--wps-text, #1f1a17);
    background: var(--wps-bg);
    overflow-x: hidden;
    }
    
    main.download .ny5{
    position: relative;
    background: var(--wps-gradient-hero);
    padding: 100px 24px 80px;
    overflow: hidden;
    min-height: 560px;
    display: flex;
    align-items: center;
    }
    main.download .ny5::before{
    content: "";
    position: absolute;
    top: -120px;
    right: -80px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, hsla(15, 78%, 55%, 0.15) 0%, transparent 70%);
    pointer-events: none;
    }
    main.download .ny5::after{
    content: "";
    position: absolute;
    bottom: -60px;
    left: 10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, hsla(111, 62%, 55%, 0.08) 0%, transparent 70%);
    pointer-events: none; color: #1a1a2e;}
    main.download .axiom{
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
    }
    main.download .stratum{
    color: #fff;
    }
    main.download .wisp_cog{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: hsla(15, 78%, 55%, 0.2);
    border: 1px solid hsla(15, 78%, 55%, 0.4);
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: hsl(15, 78%, 70%);
    margin-bottom: 28px;
    }
    main.download .wisp_cog svg{
    width: 14px;
    height: 14px;
    fill: currentColor;
    }
    main.download .ny5 h1{
    font-family: var(--wps-font-display);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
    }
    main.download .ny5 h1 span{
    background: linear-gradient(135deg, hsl(15, 78%, 65%), hsl(25, 90%, 65%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; color: #1a1a2e;}
    main.download .gm8{
    font-size: 17px;
    line-height: 1.7;
    color: hsla(0, 0%, 100%, 0.7);
    margin-bottom: 36px;
    max-width: 480px;
    }
    main.download .garnet{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    }
    main.download .glacier{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--wps-gradient-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 16px 36px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 24px hsla(15, 78%, 55%, 0.35);
    }
    main.download .glacier:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 32px hsla(15, 78%, 55%, 0.45);
    }
    main.download .glacier svg{
    width: 20px;
    height: 20px;
    fill: currentColor;
    }
    main.download .nebula{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: hsla(0, 0%, 100%, 0.7);
    font-size: 15px;
    font-weight: 500;
    padding: 16px 20px;
    text-decoration: none;
    border: 1px solid hsla(0, 0%, 100%, 0.15);
    transition: color 0.2s, border-color 0.2s;
    }
    main.download .nebula:hover{
    color: #fff;
    border-color: hsla(0, 0%, 100%, 0.4);
    }
    main.download .ht6{
    display: flex;
    gap: 28px;
    margin-top: 28px;
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.5);
    }
    main.download .ht6 span{
    display: flex;
    align-items: center;
    gap: 6px;
    }
    main.download .ht6 svg{
    width: 14px;
    height: 14px;
    fill: currentColor;
    }
    main.download .spool_dun{
    position: relative;
    }
    main.download .spool_dun img{
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    }
    main.download .spool_dun::before{
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, hsla(15, 78%, 55%, 0.3), transparent 50%);
    z-index: -1;
    }
    
    main.download .hazeRoot{
    padding: 100px 24px;
    max-width: 1200px;
    margin: 0 auto;
    }
    main.download .rampart{
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--wps-primary);
    margin-bottom: 12px;
    }
    main.download .hazeRoot h2{
    font-family: var(--wps-font-display);
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 700;
    color: var(--wps-text);
    margin-bottom: 16px;
    }
    main.download .hazeRoot > p{
    font-size: 16px;
    color: var(--wps-muted);
    line-height: 1.7;
    max-width: 560px;
    margin-bottom: 56px;
    }
    main.download .ember{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    }
    main.download .quartz{
    background: var(--wps-surface);
    border: 1px solid var(--wps-border);
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: box-shadow 0.25s, transform 0.25s;
    position: relative;
    overflow: hidden;
    }
    main.download .quartz::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--wps-gradient-primary);
    opacity: 0;
    transition: opacity 0.25s;
    }
    main.download .quartz:hover{
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    transform: translateY(-4px);
    }
    main.download .quartz:hover::after{
    opacity: 1;
    }
    main.download .phantom{
    width: 48px;
    height: 48px;
    background: var(--wps-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    }
    main.download .phantom svg{
    width: 24px;
    height: 24px;
    fill: var(--wps-text);
    }
    main.download .quartz h3{
    font-family: var(--wps-font-display);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--wps-text);
    }
    main.download .platform-version{
    font-size: 13px;
    color: var(--wps-muted);
    margin-bottom: 6px;
    }
    main.download .platform-size{
    font-size: 13px;
    color: var(--wps-muted);
    margin-bottom: 20px;
    }
    main.download .platform-reqs{
    font-size: 12px;
    color: var(--wps-muted);
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
    }
    main.download .btn-platform-dl{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--wps-text);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
    width: 100%;
    justify-content: center;
    }
    main.download .btn-platform-dl:hover{
    background: var(--wps-primary-dark);
    }
    main.download .btn-platform-dl svg{
    width: 16px;
    height: 16px;
    fill: currentColor;
    }
    
    main.download .dl-version{
    background: var(--wps-dark);
    padding: 80px 24px;
    }
    main.download .dl-version-inner{
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    }
    main.download .dl-version-text{
    color: #fff;
    }
    main.download .dl-version-text .rampart{
    color: var(--wps-secondary);
    }
    main.download .dl-version-text h2{
    font-family: var(--wps-font-display);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    }
    main.download .dl-version-text > p{
    font-size: 15px;
    color: hsla(0, 0%, 100%, 0.6);
    line-height: 1.7;
    margin-bottom: 32px;
    }
    main.download .version-table{
    width: 100%;
    border-collapse: collapse;
    }
    main.download .version-table tr{
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.08);
    }
    main.download .version-table td{
    padding: 14px 0;
    font-size: 14px;
    }
    main.download .version-table td:first-child{
    color: hsla(0, 0%, 100%, 0.45);
    width: 140px;
    font-weight: 500;
    }
    main.download .version-table td:last-child{
    color: hsla(0, 0%, 100%, 0.85);
    }
    main.download .dl-version-img{
    position: relative;
    }
    main.download .dl-version-img img{
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 16px 48px rgba(0,0,0,0.3);
    }
    
    main.download .dl-steps{
    padding: 100px 24px;
    max-width: 1200px;
    margin: 0 auto;
    }
    main.download .dl-steps h2{
    font-family: var(--wps-font-display);
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 700;
    color: var(--wps-text);
    margin-bottom: 16px;
    text-align: center;
    }
    main.download .dl-steps > p{
    font-size: 16px;
    color: var(--wps-muted);
    text-align: center;
    margin-bottom: 64px;
    }
    main.download .steps-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    }
    main.download .step-item{
    position: relative;
    padding: 40px 32px;
    background: var(--wps-surface);
    border: 1px solid var(--wps-border);
    }
    main.download .step-number{
    font-family: var(--wps-font-display);
    font-size: 48px;
    font-weight: 700;
    color: var(--wps-surface-alt);
    line-height: 1;
    margin-bottom: 20px;
    display: block;
    }
    main.download .step-item h3{
    font-size: 18px;
    font-weight: 600;
    color: var(--wps-text);
    margin-bottom: 12px;
    }
    main.download .step-item p{
    font-size: 14px;
    color: var(--wps-muted);
    line-height: 1.7;
    }
    
    main.download .dl-security{
    background: var(--wps-surface-alt);
    padding: 80px 24px;
    }
    main.download .dl-security-inner{
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    }
    main.download .dl-security-inner .rampart{
    color: var(--wps-secondary-dark);
    }
    main.download .dl-security-inner h2{
    font-family: var(--wps-font-display);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 700;
    color: var(--wps-text);
    margin-bottom: 16px;
    }
    main.download .dl-security-inner > p{
    font-size: 16px;
    color: var(--wps-muted);
    max-width: 560px;
    margin: 0 auto 48px;
    line-height: 1.7;
    }
    main.download .security-features{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    }
    main.download .sec-feat{
    padding: 32px 20px;
    background: var(--wps-surface);
    border: 1px solid var(--wps-border);
    }
    main.download .sec-feat-icon{
    width: 44px;
    height: 44px;
    background: hsla(15, 78%, 55%, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    }
    main.download .sec-feat-icon svg{
    width: 22px;
    height: 22px;
    fill: var(--wps-primary);
    }
    main.download .sec-feat h3{
    font-size: 15px;
    font-weight: 600;
    color: var(--wps-text);
    margin-bottom: 8px;
    }
    main.download .sec-feat p{
    font-size: 13px;
    color: var(--wps-muted);
    line-height: 1.6;
    }
    
    main.download .dl-sysreq{
    padding: 100px 24px;
    max-width: 1200px;
    margin: 0 auto;
    }
    main.download .dl-sysreq h2{
    font-family: var(--wps-font-display);
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 700;
    color: var(--wps-text);
    margin-bottom: 48px;
    }
    main.download .sysreq-tabs{
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--wps-border);
    margin-bottom: 40px;
    }
    main.download .sysreq-tab{
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    color: var(--wps-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    }
    main.download .sysreq-tab.active{
    color: var(--wps-primary);
    border-bottom-color: var(--wps-primary);
    }
    main.download .sysreq-content{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    }
    main.download .sysreq-block{
    background: var(--wps-surface);
    border: 1px solid var(--wps-border);
    padding: 32px;
    }
    main.download .sysreq-block h3{
    font-size: 16px;
    font-weight: 600;
    color: var(--wps-text);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--wps-border);
    }
    main.download .sysreq-list{
    list-style: none;
    }
    main.download .sysreq-list li{
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 14px;
    border-bottom: 1px solid hsla(15, 6%, 85%, 0.5);
    }
    main.download .sysreq-list li:last-child{
    border-bottom: none;
    }
    main.download .sysreq-list li span:first-child{
    color: var(--wps-muted);
    }
    main.download .sysreq-list li span:last-child{
    color: var(--wps-text);
    font-weight: 500;
    text-align: right;
    }
    
    main.download .dl-cta{
    background: var(--wps-dark);
    padding: 80px 24px;
    text-align: center;
    }
    main.download .dl-cta-inner{
    max-width: 640px;
    margin: 0 auto;
    }
    main.download .dl-cta h2{
    font-family: var(--wps-font-display);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    }
    main.download .dl-cta p{
    font-size: 16px;
    color: hsla(0, 0%, 100%, 0.6);
    line-height: 1.7;
    margin-bottom: 36px;
    }
    main.download .dl-cta .glacier{
    font-size: 17px;
    padding: 18px 44px;
    }
    main.download .dl-cta-links{
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 32px;
    }
    main.download .dl-cta-links a{
    color: hsla(0, 0%, 100%, 0.5);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s;
    }
    main.download .dl-cta-links a:hover{
    color: var(--wps-primary);
    }
    
    main.download .dl-footer{
    background: var(--wps-text);
    padding: 48px 24px;
    }
    main.download .dl-footer-inner{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    }
    main.download .dl-footer-brand{
    font-family: var(--wps-font-display);
    font-size: 18px;
    font-weight: 700;
    color: hsla(0, 0%, 100%, 0.9);
    }
    main.download .dl-footer-copy{
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.4);
    }
    main.download .dl-footer-links{
    display: flex;
    gap: 24px;
    }
    main.download .dl-footer-links a{
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.45);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.download .dl-footer-links a:hover{
    color: var(--wps-primary);
    }
    
    @media (max-width: 1024px) {main.download .axiom{
    grid-template-columns: 1fr;
    gap: 40px;
    }
    main.download .spool_dun{
    max-width: 560px;
    }
    main.download .ember{
    grid-template-columns: repeat(2, 1fr);
    }
    main.download .dl-version-inner{
    grid-template-columns: 1fr;
    gap: 40px;
    }
    main.download .security-features{
    grid-template-columns: repeat(2, 1fr);
    }}
    @media (max-width: 768px) {main.download .ny5{
    padding: 80px 20px 60px;
    min-height: auto;
    }
    main.download .garnet{
    flex-direction: column;
    }
    main.download .glacier{
    justify-content: center;
    }
    main.download .ht6{
    flex-direction: column;
    gap: 8px;
    }
    main.download .ember{
    grid-template-columns: 1fr;
    }
    main.download .steps-grid{
    grid-template-columns: 1fr;
    }
    main.download .security-features{
    grid-template-columns: 1fr;
    }
    main.download .sysreq-content{
    grid-template-columns: 1fr;
    }
    main.download .sysreq-tabs{
    overflow-x: auto;
    }
    main.download .dl-footer-inner{
    flex-direction: column;
    text-align: center;
    }}
    @media (max-width: 480px) {main.download .ny5 h1{
    font-size: 30px;
    }
    main.download .glacier{
    padding: 14px 24px;
    font-size: 15px;
    }}
    main.download .frond_hex{
    background: hsl(20, 6%, 7%);
    border-top: 1px solid var(--border-color, hsla(15, 10%, 80%, 0.1));
    padding: 48px 24px 36px;
    width: 100%;
    box-sizing: border-box;
    }
    main.download .slateVow{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    }
    main.download .beacon{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    }
    main.download .rustGale{
    font-family: "Georgia", "Noto Serif SC", serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color, hsl(15, 8%, 88%));
    letter-spacing: 0.5px;
    }
    main.download .morph{
    font-size: 13px;
    color: var(--text-muted, hsl(15, 6%, 56%));
    margin: 0;
    letter-spacing: 1px;
    }
    main.download .pivot_elm{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    }
    main.download .tuft_rime{
    font-size: 13px;
    color: var(--text-muted, hsl(15, 6%, 56%));
    text-decoration: none;
    transition: var(--transition, all 0.25s cubic-bezier(0.4, 0, 0.2, 1));
    padding: 2px 0;
    border-bottom: 1px solid transparent;
    }
    main.download .tuft_rime:hover{
    color: var(--primary-color, hsl(15, 78%, 55%));
    border-bottom-color: var(--primary-color, hsl(15, 78%, 55%));
    }
    main.download .latch{
    color: hsla(15, 10%, 80%, 0.15);
    font-size: 12px;
    user-select: none;
    }
    main.download .xw2{
    font-size: 12px;
    color: hsl(15, 6%, 38%);
    margin: 8px 0 0;
    letter-spacing: 0.3px;
    }
    @media (max-width: 600px) {main.download .frond_hex{
    padding: 36px 16px 28px;
    }
    main.download .pivot_elm{
    gap: 8px;
    }
    main.download .tuft_rime{
    font-size: 12px;
    }
    main.download .latch{
    font-size: 10px;
    }
    main.download .xw2{
    font-size: 11px;
    }}

    body {
    padding-top: var(--nav-height);
    }
    
    .ember_drift {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    }
    
    .joltWave {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-width);
    height: 100%;
    margin: 0 auto;
    padding: 0 28px;
    }
    
    .mosaic {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    }
    .flicker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--primary-color), hsl(25, 85%, 60%));
    color: #1a1a2e;
    font-family: "Georgia", serif;
    font-size: 17px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    }
    .blotch {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.5px;
    }
    
    .lx5 {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .sable {
    position: relative;
    }
    .gn2p {
    display: block;
    padding: 8px 14px;
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    letter-spacing: 0.2px;
    }
    .gn2p:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.08);
    }
    
    .prism {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    background: linear-gradient(135deg, var(--primary-color), hsl(8, 75%, 50%));
    color: var(--btn-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 10px hsla(15, 78%, 55%, 0.35);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.3px;
    }
    .prism:hover {
    background: linear-gradient(135deg, hsl(15, 82%, 48%), hsl(8, 80%, 44%));
    box-shadow: 0 4px 18px hsla(15, 78%, 55%, 0.5);
    transform: translateY(-1px);
    }
    .prism:active {
    transform: translateY(0);
    box-shadow: 0 1px 6px hsla(15, 78%, 55%, 0.3);
    }
    .xr9 {
    font-size: 13px;
    line-height: 1;
    }
    .fathom {
    width: 100%;
    justify-content: center;
    padding: 14px 22px;
    font-size: 15px;
    }
    
    .dwq8 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: 1px solid var(--nav-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    }
    .dwq8:hover {
    background: hsla(15, 10%, 80%, 0.08); color: #1a1a2e;}
    .tandem_hue {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 1px;
    transition: var(--transition);
    }
    
    .vortex {
    display: none;
    position: fixed;
    inset: 0;
    background: hsla(0, 0%, 0%, 0.55);
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.3s ease;
    }
    .vortex.is-active {
    display: block;
    opacity: 1;
    }
    
    .zephyr {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: hsl(20, 6%, 12%);
    border-left: 1px solid var(--nav-border);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-lg);
    }
    .zephyr.is-open {
    transform: translateX(0);
    }
    .pylon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: var(--nav-height);
    border-bottom: 1px solid var(--nav-border);
    flex-shrink: 0;
    }
    .rumble_fox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: 1px solid var(--nav-border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
    }
    .rumble_fox:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.08);
    }
    .cobalt {
    list-style: none;
    margin: 0;
    padding: 12px 0;
    flex: 1;
    overflow-y: auto;
    }
    .quirk {
    margin: 0;
    }
    .cragMist {
    display: block;
    padding: 14px 24px;
    font-size: 15px;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    border-left: 3px solid transparent;
    }
    .cragMist:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.06);
    border-left-color: var(--primary-color);
    }
    .kv3 {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--nav-border);
    flex-shrink: 0;
    }
    
    @media (max-width: 960px) {.lx5 {
    display: none;
    }
    .prism:not(.nav-cta--full) {
    display: none;
    }
    .dwq8 {
    display: flex;
    }}

    .dwq8.is-active .tandem_hue:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    }
    .dwq8.is-active .tandem_hue:nth-child(2) {
    opacity: 0;
    }
    .dwq8.is-active .tandem_hue:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    }
    .gn2p.active {color: #1a1a2e; background: hsla(15, 10%, 80%, 0.08);}
    .cragMist.active {color: #1a1a2e; background: hsla(15, 10%, 80%, 0.06); border-left-color: var(--primary-color);}
    @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap");
    
    main.features .jade *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    main.features .jade{
    font-family: var(--feat-sans);
    color: var(--feat-text);
    background: var(--feat-bg);
    line-height: 1.7;
    overflow-x: hidden;
    }
    main.features .jade img{
    max-width: 100%;
    display: block;
    }
    main.features .jade a{
    text-decoration: none;
    color: inherit;
    transition: color 0.25s ease;
    }
    main.features .bramble{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    }
    
    main.features .nexus{
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    background: var(--feat-bg-dark);
    overflow: hidden;
    }
    main.features .nexus::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
    radial-gradient(ellipse 80% 60% at 20% 80%, hsla(15, 78%, 55%, 0.15), transparent),
    radial-gradient(ellipse 60% 50% at 80% 20%, hsla(260, 55%, 55%, 0.12), transparent),
    radial-gradient(ellipse 40% 40% at 50% 50%, hsla(111, 62%, 55%, 0.06), transparent);
    z-index: 1; color: #1a1a2e;}
    main.features .nexus::after{
    content: "";
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    border: 1px solid hsla(15, 78%, 55%, 0.1);
    border-radius: 0;
    transform: rotate(45deg);
    z-index: 1;
    }
    main.features .dusk{
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding: 80px 0;
    }
    main.features .thorn{
    color: hsl(0, 0%, 95%);
    }
    main.features .shard{
    display: inline-block;
    padding: 6px 16px;
    background: hsla(15, 78%, 55%, 0.15);
    border: 1px solid hsla(15, 78%, 55%, 0.3);
    color: hsl(15, 78%, 65%);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 24px;
    }
    main.features .nexus h1{
    font-family: var(--feat-serif);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    color: hsl(0, 0%, 98%);
    }
    main.features .nexus h1 span{
    background: var(--feat-gradient-warm);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    }
    main.features .grove{
    font-size: 17px;
    line-height: 1.8;
    color: hsl(0, 0%, 70%);
    margin-bottom: 36px;
    max-width: 500px;
    }
    main.features .pulse{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    }
    main.features .crux{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--feat-gradient-warm);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 4px 20px hsla(15, 78%, 55%, 0.35);
    }
    main.features .crux:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 30px hsla(15, 78%, 55%, 0.45);
    }
    main.features .forge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: transparent;
    color: hsl(0, 0%, 85%);
    font-size: 15px;
    font-weight: 600;
    border: 2px solid hsla(0, 0%, 100%, 0.2);
    cursor: pointer;
    transition: border-color 0.3s, color 0.3s;
    }
    main.features .forge:hover{
    border-color: hsla(0, 0%, 100%, 0.5);
    color: #fff;
    }
    main.features .ignite{
    position: relative;
    }
    main.features .karma{
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    }
    main.features .karma img{
    width: 100%;
    height: 400px;
    object-fit: cover;
    }
    main.features .glyph{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: #fff;
    }
    main.features .glyph span{
    font-size: 13px;
    font-weight: 500;
    opacity: 0.8;
    }
    
    main.features .haven{
    background: #fff;
    border-bottom: 1px solid var(--feat-border);
    padding: 40px 0; color: #1a1a2e;}
    main.features .basalt{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
    }
    main.features .aurora{
    position: relative;
    }
    main.features .aurora:not(:last-child)::after{
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background: var(--feat-border);
    }
    main.features .yield{
    font-family: var(--feat-serif);
    font-size: 36px;
    font-weight: 700;
    color: var(--feat-primary);
    line-height: 1;
    margin-bottom: 8px;
    }
    main.features .husk{
    font-size: 14px;
    color: var(--feat-text-light);
    font-weight: 500;
    }
    
    main.features .ivory{
    padding: 100px 0;
    }
    main.features .feat-section-dark{
    background: var(--feat-bg-dark);
    color: hsl(0, 0%, 90%);
    }
    main.features .feat-section-alt{
    background: #fff; color: #1a1a2e;}
    main.features .latch{
    text-align: center;
    margin-bottom: 64px;
    }
    main.features .rune{
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--feat-primary);
    margin-bottom: 16px;
    }
    main.features .feat-section-dark .rune{
    color: hsl(15, 78%, 65%);
    }
    main.features .latch h2{
    font-family: var(--feat-serif);
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 16px;
    }
    main.features .latch p{
    font-size: 16px;
    color: var(--feat-text-light);
    max-width: 600px;
    margin: 0 auto;
    }
    main.features .feat-section-dark .latch p{
    color: hsl(0, 0%, 60%);
    }
    
    main.features .flux{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    }
    main.features .cipher{
    background: var(--feat-bg-card);
    border: 1px solid var(--feat-border);
    padding: 40px 32px;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    overflow: hidden;
    }
    main.features .cipher::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--feat-gradient-warm);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    }
    main.features .cipher:hover::before{
    transform: scaleX(1);
    }
    main.features .cipher:hover{
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
    }
    main.features .umbra{
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 24px;
    background: hsla(15, 78%, 55%, 0.08);
    color: var(--feat-primary);
    }
    main.features .cipher:nth-child(2) .umbra{
    background: hsla(111, 62%, 55%, 0.08);
    color: #1a1a2e;
    }
    main.features .cipher:nth-child(3) .umbra{
    background: hsla(220, 60%, 50%, 0.08);
    color: hsl(220, 60%, 50%);
    }
    main.features .cipher:nth-child(4) .umbra{
    background: hsla(350, 65%, 50%, 0.08);
    color: hsl(350, 65%, 50%);
    }
    main.features .cipher:nth-child(5) .umbra{
    background: hsla(260, 55%, 55%, 0.08);
    color: hsl(260, 55%, 55%);
    }
    main.features .cipher:nth-child(6) .umbra{
    background: hsla(180, 55%, 45%, 0.08);
    color: hsl(180, 55%, 45%);
    }
    main.features .cipher h3{
    font-family: var(--feat-serif);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    }
    main.features .cipher p{
    font-size: 14px;
    color: var(--feat-text-light);
    line-height: 1.8;
    }
    main.features .cipher ul{
    list-style: none;
    margin-top: 16px;
    }
    main.features .cipher ul li{
    font-size: 13px;
    color: var(--feat-text-light);
    padding: 4px 0;
    padding-left: 18px;
    position: relative;
    }
    main.features .cipher ul li::before{
    content: "→";
    position: absolute;
    left: 0;
    color: var(--feat-primary);
    font-weight: 600;
    }
    
    main.features .feat-showcase-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 80px;
    }
    main.features .feat-showcase-row:last-child{
    margin-bottom: 0;
    }
    main.features .feat-showcase-row.reverse .feat-showcase-img{
    order: 2;
    }
    main.features .feat-showcase-row.reverse .feat-showcase-text{
    order: 1;
    }
    main.features .feat-showcase-img{
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,0.1);
    }
    main.features .feat-showcase-img img{
    width: 100%;
    height: 340px;
    object-fit: cover;
    transition: transform 0.5s ease;
    }
    main.features .feat-showcase-img:hover img{
    transform: scale(1.03);
    }
    main.features .feat-showcase-text h2{
    font-family: var(--feat-serif);
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.3;
    }
    main.features .feat-showcase-text p{
    font-size: 15px;
    color: var(--feat-text-light);
    margin-bottom: 24px;
    line-height: 1.8;
    }
    main.features .feat-showcase-list{
    list-style: none;
    display: grid;
    gap: 12px;
    }
    main.features .feat-showcase-list li{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: var(--feat-text);
    }
    main.features .feat-showcase-check{
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(111, 62%, 55%, 0.12);
    color: #1a1a2e;
    font-size: 12px;
    font-weight: 700;
    margin-top: 2px;
    }
    
    main.features .feat-table-wrap{
    overflow-x: auto;
    margin-top: 48px;
    }
    main.features .feat-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    }
    main.features .feat-table thead{
    background: var(--feat-bg-dark);
    color: #fff;
    }
    main.features .feat-table th{
    padding: 16px 24px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    }
    main.features .feat-table td{
    padding: 14px 24px;
    border-bottom: 1px solid var(--feat-border);
    }
    main.features .feat-table tbody tr:hover{
    background: hsla(15, 78%, 55%, 0.03);
    }
    main.features .feat-table .check-yes{
    color: var(--feat-secondary-dark);
    font-weight: 700;
    }
    main.features .feat-table .check-no{
    color: hsl(0, 0%, 75%);
    }
    
    main.features .feat-ai-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    }
    main.features .feat-ai-card{
    padding: 36px;
    border: 1px solid hsla(0, 0%, 100%, 0.08);
    background: hsla(0, 0%, 100%, 0.03);
    transition: background 0.3s, border-color 0.3s; color: #1a1a2e;}
    main.features .feat-ai-card:hover{
    background: hsla(0, 0%, 100%, 0.06);
    border-color: hsla(15, 78%, 55%, 0.3); color: #1a1a2e;}
    main.features .feat-ai-card h3{
    font-family: var(--feat-serif);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    color: hsl(0, 0%, 95%);
    }
    main.features .feat-ai-card p{
    font-size: 14px;
    color: hsl(0, 0%, 60%);
    line-height: 1.8;
    }
    main.features .feat-ai-tag{
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    background: hsla(15, 78%, 55%, 0.15);
    color: hsl(15, 78%, 65%);
    margin-bottom: 16px;
    letter-spacing: 0.5px;
    }
    
    main.features .feat-version{
    background: #fff;
    border: 1px solid var(--feat-border);
    padding: 40px;
    margin-top: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap; color: #1a1a2e;}
    main.features .feat-version-info h3{
    font-family: var(--feat-serif);
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 8px;
    }
    main.features .feat-version-info p{
    font-size: 14px;
    color: var(--feat-text-light);
    }
    main.features .feat-version-meta{
    display: flex;
    gap: 32px;
    font-size: 13px;
    color: var(--feat-text-light);
    }
    main.features .feat-version-meta strong{
    color: var(--feat-text);
    font-weight: 600;
    }
    
    main.features .feat-cta{
    text-align: center;
    padding: 100px 0;
    background: var(--feat-bg-dark);
    position: relative;
    overflow: hidden;
    }
    main.features .feat-cta::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
    radial-gradient(ellipse 50% 80% at 50% 100%, hsla(15, 78%, 55%, 0.12), transparent);
    }
    main.features .feat-cta-inner{
    position: relative;
    z-index: 2;
    }
    main.features .feat-cta h2{
    font-family: var(--feat-serif);
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 700;
    color: hsl(0, 0%, 98%);
    margin-bottom: 16px;
    }
    main.features .feat-cta p{
    font-size: 16px;
    color: hsl(0, 0%, 60%);
    margin-bottom: 36px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    }
    main.features .feat-cta-actions{
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    }
    
    main.features .feat-footer{
    background: hsl(220, 25%, 7%);
    color: hsl(0, 0%, 55%);
    padding: 48px 0;
    border-top: 1px solid hsla(0, 0%, 100%, 0.06);
    }
    main.features .feat-footer-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    }
    main.features .feat-footer-brand{
    font-family: var(--feat-serif);
    font-size: 20px;
    font-weight: 700;
    color: hsl(0, 0%, 85%);
    }
    main.features .feat-footer-copy{
    font-size: 13px;
    }
    main.features .feat-footer-links{
    display: flex;
    gap: 24px;
    list-style: none;
    }
    main.features .feat-footer-links a{
    font-size: 13px;
    color: hsl(0, 0%, 55%);
    transition: color 0.25s;
    }
    main.features .feat-footer-links a:hover{
    color: hsl(15, 78%, 65%);
    }
    
    @media (max-width: 1024px) {main.features .dusk{
    grid-template-columns: 1fr;
    gap: 40px;
    }
    main.features .flux{
    grid-template-columns: repeat(2, 1fr);
    }
    main.features .feat-showcase-row{
    grid-template-columns: 1fr;
    gap: 32px;
    }
    main.features .feat-showcase-row.reverse .feat-showcase-img, main.features .feat-showcase-row.reverse .feat-showcase-text{
    order: unset;
    }}
    @media (max-width: 768px) {main.features .nexus{
    min-height: auto;
    }
    main.features .dusk{
    padding: 60px 0;
    }
    main.features .basalt{
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    }
    main.features .aurora:not(:last-child)::after{
    display: none;
    }
    main.features .flux{
    grid-template-columns: 1fr;
    }
    main.features .feat-ai-grid{
    grid-template-columns: 1fr;
    }
    main.features .ivory{
    padding: 64px 0;
    }
    main.features .feat-version{
    flex-direction: column;
    align-items: flex-start;
    }
    main.features .feat-footer-inner{
    flex-direction: column;
    text-align: center;
    }
    main.features .feat-footer-links{
    justify-content: center;
    }}
    @media (max-width: 480px) {main.features .basalt{
    grid-template-columns: 1fr;
    }
    main.features .pulse{
    flex-direction: column;
    }
    main.features .crux, main.features .forge{
    justify-content: center;
    width: 100%;
    }
    main.features .feat-cta-actions{
    flex-direction: column;
    align-items: center;
    }}
    main.features .mythos{
    background: hsl(20, 8%, 7%);
    border-top: 1px solid var(--border-color, hsla(15, 10%, 80%, 0.1));
    padding: 64px 24px 32px;
    font-family: "Georgia", "Noto Serif SC", serif;
    }
    main.features .lantern{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    width: 100%;
    }
    main.features .epoch{
    display: flex;
    justify-content: space-between;
    gap: 48px;
    }
    main.features .xeno{
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    }
    main.features .riddle{
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--primary-color, hsl(15, 78%, 55%)), hsl(30, 85%, 62%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    }
    main.features .cascade{
    font-size: 14px;
    color: var(--text-muted, hsl(15, 6%, 56%));
    line-height: 1.6;
    margin: 0;
    }
    main.features .quiver{
    flex: 1 1 auto;
    display: flex;
    gap: 48px;
    justify-content: flex-end;
    }
    main.features .alchemy{
    flex: 0 0 140px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    }
    main.features .zenith{
    font-size: 13px;
    font-weight: 600;
    color: hsla(15, 8%, 88%, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
    font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
    }
    main.features .delta{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }
    main.features .fable{
    line-height: 1;
    }
    main.features .onyx{
    font-size: 14px;
    color: var(--text-muted, hsl(15, 6%, 56%));
    text-decoration: none;
    transition: var(--transition, all 0.25s cubic-bezier(0.4, 0, 0.2, 1));
    font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
    }
    main.features .onyx:hover{
    color: var(--primary-color, hsl(15, 78%, 55%));
    }
    main.features .jubilee{
    height: 1px;
    background: var(--border-color, hsla(15, 10%, 80%, 0.1));
    margin: 48px 0 24px;
    }
    main.features .vale{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    }
    main.features .orbit{
    font-size: 13px;
    color: var(--text-muted, hsl(15, 6%, 56%));
    margin: 0;
    flex: 0 1 auto;
    font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
    }
    main.features .warp{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    }
    main.features .helix{
    font-size: 13px;
    color: var(--text-muted, hsl(15, 6%, 56%));
    text-decoration: none;
    transition: var(--transition, all 0.25s cubic-bezier(0.4, 0, 0.2, 1));
    font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
    }
    main.features .helix:hover{
    color: var(--primary-color, hsl(15, 78%, 55%));
    }
    main.features .kindle{
    color: hsla(15, 8%, 88%, 0.2);
    font-size: 13px;
    user-select: none;
    }
    @media (max-width: 768px) {main.features .mythos{
    padding: 48px 20px 28px;
    }
    main.features .epoch{
    flex-direction: column;
    gap: 36px;
    }
    main.features .xeno{
    flex: 0 0 auto;
    }
    main.features .quiver{
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 32px;
    }
    main.features .alchemy{
    flex: 0 0 calc(50% - 16px);
    }
    main.features .jubilee{
    margin: 36px 0 20px;
    }
    main.features .vale{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    }}

    body {
    padding-top: var(--nav-height);
    }
    
    .ember_drift {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    }
    
    .joltWave {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-width);
    height: 100%;
    margin: 0 auto;
    padding: 0 28px;
    }
    
    .mosaic {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    }
    .flicker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--primary-color), hsl(25, 85%, 60%));
    color: #1a1a2e;
    font-family: "Georgia", serif;
    font-size: 17px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    }
    .blotch {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.5px;
    }
    
    .lx5 {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .sable {
    position: relative;
    }
    .gn2p {
    display: block;
    padding: 8px 14px;
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    letter-spacing: 0.2px;
    }
    .gn2p:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.08);
    }
    
    .prism {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    background: linear-gradient(135deg, var(--primary-color), hsl(8, 75%, 50%));
    color: var(--btn-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 10px hsla(15, 78%, 55%, 0.35);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.3px;
    }
    .prism:hover {
    background: linear-gradient(135deg, hsl(15, 82%, 48%), hsl(8, 80%, 44%));
    box-shadow: 0 4px 18px hsla(15, 78%, 55%, 0.5);
    transform: translateY(-1px);
    }
    .prism:active {
    transform: translateY(0);
    box-shadow: 0 1px 6px hsla(15, 78%, 55%, 0.3);
    }
    .xr9 {
    font-size: 13px;
    line-height: 1;
    }
    .fathom {
    width: 100%;
    justify-content: center;
    padding: 14px 22px;
    font-size: 15px;
    }
    
    .dwq8 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: 1px solid var(--nav-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    }
    .dwq8:hover {
    background: hsla(15, 10%, 80%, 0.08); color: #1a1a2e;}
    .tandem_hue {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 1px;
    transition: var(--transition);
    }
    
    .vortex {
    display: none;
    position: fixed;
    inset: 0;
    background: hsla(0, 0%, 0%, 0.55);
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.3s ease;
    }
    .vortex.is-active {
    display: block;
    opacity: 1;
    }
    
    .zephyr {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: hsl(20, 6%, 12%);
    border-left: 1px solid var(--nav-border);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-lg);
    }
    .zephyr.is-open {
    transform: translateX(0);
    }
    .pylon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: var(--nav-height);
    border-bottom: 1px solid var(--nav-border);
    flex-shrink: 0;
    }
    .rumble_fox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: 1px solid var(--nav-border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
    }
    .rumble_fox:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.08);
    }
    .cobalt {
    list-style: none;
    margin: 0;
    padding: 12px 0;
    flex: 1;
    overflow-y: auto;
    }
    .quirk {
    margin: 0;
    }
    .cragMist {
    display: block;
    padding: 14px 24px;
    font-size: 15px;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    border-left: 3px solid transparent;
    }
    .cragMist:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.06);
    border-left-color: var(--primary-color);
    }
    .kv3 {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--nav-border);
    flex-shrink: 0;
    }
    
    @media (max-width: 960px) {.lx5 {
    display: none;
    }
    .prism:not(.nav-cta--full) {
    display: none;
    }
    .dwq8 {
    display: flex;
    }}

    .dwq8.is-active .tandem_hue:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    }
    .dwq8.is-active .tandem_hue:nth-child(2) {
    opacity: 0;
    }
    .dwq8.is-active .tandem_hue:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    }
    .gn2p.active {color: #1a1a2e; background: hsla(15, 10%, 80%, 0.08);}
    .cragMist.active {color: #1a1a2e; background: hsla(15, 10%, 80%, 0.06); border-left-color: var(--primary-color);}
    @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap");
    main.system-requirements *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    main.system-requirements{
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--page-text, #1f1a17);
    background: var(--page-bg, #f2f0ee);
    line-height: 1.6;
    overflow-x: hidden;
    }
    main.system-requirements .quartz{
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--page-dark, #181d24);
    }
    main.system-requirements .elm{
    position: absolute;
    inset: 0;
    z-index: 0;
    }
    main.system-requirements .elm img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.25;
    filter: saturate(0.6);
    }
    main.system-requirements .tide{
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, hsla(220, 18%, 10%, 0.92) 0%, hsla(15, 30%, 14%, 0.85) 100%);
    z-index: 1;
    }
    main.system-requirements .plume{
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    }
    main.system-requirements .surge{
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    padding: 100px 24px 80px;
    text-align: center;
    }
    main.system-requirements .apex{
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--page-primary, #d96a3a);
    border: 1px solid hsla(15, 78%, 55%, 0.4);
    padding: 6px 18px;
    margin-bottom: 28px;
    }
    main.system-requirements .quartz h1{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
    }
    main.system-requirements .quartz h1 span{
    color: var(--page-primary, #d96a3a);
    }
    main.system-requirements .dusk{
    font-size: 1.05rem;
    color: hsla(0, 0%, 100%, 0.65);
    max-width: 640px;
    margin: 0 auto 36px;
    line-height: 1.7;
    }
    main.system-requirements .zinc{
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.system-requirements .jewel{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Inter", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    background: var(--page-primary, #d96a3a);
    padding: 14px 32px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px hsla(15, 78%, 55%, 0.35);
    }
    main.system-requirements .jewel:hover{
    background: var(--page-primary-dark, #b85530);
    box-shadow: 0 6px 24px hsla(15, 78%, 55%, 0.45);
    transform: translateY(-1px);
    }
    main.system-requirements .loom{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Inter", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: hsla(0,0%,100%,0.85);
    background: transparent;
    border: 1px solid hsla(0,0%,100%,0.2);
    padding: 14px 32px;
    text-decoration: none;
    transition: all 0.2s ease;
    }
    main.system-requirements .loom:hover{
    border-color: hsla(0,0%,100%,0.5);
    color: #1a1a2e;
    background: hsla(0,0%,100%,0.05);
    }
    main.system-requirements .raven{
    max-width: 1120px;
    margin: 0 auto;
    padding: 80px 24px;
    }
    main.system-requirements .ripple{
    text-align: center;
    margin-bottom: 56px;
    }
    main.system-requirements .flint{
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--page-primary, #d96a3a);
    margin-bottom: 12px;
    }
    main.system-requirements .raven h2{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 700;
    color: var(--page-text, #1f1a17);
    margin-bottom: 12px;
    letter-spacing: -0.3px;
    }
    main.system-requirements .frost{
    font-size: 1rem;
    color: var(--page-muted, #7d7672);
    max-width: 560px;
    margin: 0 auto;
    }
    main.system-requirements .cedar{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    }
    main.system-requirements .falcon{
    background: var(--page-surface, #ffffff);
    border: 1px solid var(--page-border, #dbd7d4);
    padding: 32px 24px;
    transition: all 0.25s ease;
    position: relative;
    }
    main.system-requirements .falcon:hover{
    box-shadow: var(--page-shadow-lg);
    border-color: var(--page-primary, #d96a3a);
    transform: translateY(-2px);
    }
    main.system-requirements .bolt{
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
    background: hsla(15, 78%, 55%, 0.08);
    color: var(--page-primary, #d96a3a);
    }
    main.system-requirements .falcon h3{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--page-text, #1f1a17);
    }
    main.system-requirements .pike{
    font-size: 0.8rem;
    color: var(--page-muted, #7d7672);
    margin-bottom: 20px;
    }
    main.system-requirements .haze{
    width: 32px;
    height: 2px;
    background: var(--page-primary, #d96a3a);
    margin-bottom: 20px;
    }
    main.system-requirements .falcon dl{
    display: grid;
    gap: 12px;
    }
    main.system-requirements .falcon dt{
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--page-muted, #7d7672);
    }
    main.system-requirements .falcon dd{
    font-size: 0.88rem;
    color: var(--page-text, #1f1a17);
    line-height: 1.5;
    margin-bottom: 4px;
    }
    main.system-requirements .nebula{
    background: var(--page-dark, #181d24);
    color: #ffffff;
    }
    main.system-requirements .nebula .flint{
    color: var(--page-secondary, #5dd65d);
    }
    main.system-requirements .nebula h2{
    color: #ffffff;
    }
    main.system-requirements .nebula .frost{
    color: hsla(0,0%,100%,0.55);
    }
    main.system-requirements .wren{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    }
    main.system-requirements .grain{
    background: var(--page-dark-surface, #22272e);
    border: 1px solid hsla(0,0%,100%,0.06);
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
    }
    main.system-requirements .grain::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    }
    main.system-requirements .crest::before{ background: var(--page-primary, #d96a3a); }
    main.system-requirements .drift::before{ background: var(--page-secondary, #5dd65d); }
    main.system-requirements .sr-detail-block--android::before{ background: hsl(200, 70%, 55%); }
    main.system-requirements .sr-detail-block--ios::before{ background: hsl(270, 60%, 60%); }
    main.system-requirements .quarry{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    }
    main.system-requirements .abyss{
    font-size: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(0,0%,100%,0.05); color: #1a1a2e;}
    main.system-requirements .grain h3{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.15rem;
    font-weight: 600;
    }
    main.system-requirements .vivid{
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 10px;
    margin-left: auto;
    }
    main.system-requirements .blaze{
    color: hsla(0,0%,100%,0.5);
    border: 1px solid hsla(0,0%,100%,0.15);
    }
    main.system-requirements .whisper{
    color: var(--page-secondary, #5dd65d);
    border: 1px solid hsla(111, 62%, 55%, 0.3);
    }
    main.system-requirements .xenon{
    width: 100%;
    border-collapse: collapse;
    }
    main.system-requirements .xenon tr{
    border-bottom: 1px solid hsla(0,0%,100%,0.06);
    }
    main.system-requirements .xenon tr:last-child{
    border-bottom: none;
    }
    main.system-requirements .xenon th{
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: hsla(0,0%,100%,0.35);
    padding: 10px 0;
    width: 110px;
    vertical-align: top;
    }
    main.system-requirements .xenon td{
    font-size: 0.88rem;
    color: hsla(0,0%,100%,0.8);
    padding: 10px 0;
    line-height: 1.5;
    }
    main.system-requirements .sr-compat-section{
    background: var(--page-surface-alt, #e9e6e3);
    }
    main.system-requirements .sr-compat-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    }
    main.system-requirements .sr-compat-card{
    background: var(--page-surface, #ffffff);
    border: 1px solid var(--page-border, #dbd7d4);
    padding: 28px 24px;
    }
    main.system-requirements .sr-compat-card h3{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--page-text, #1f1a17);
    }
    main.system-requirements .sr-compat-list{
    list-style: none;
    display: grid;
    gap: 8px;
    }
    main.system-requirements .sr-compat-list li{
    font-size: 0.88rem;
    color: var(--page-text, #1f1a17);
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.4;
    }
    main.system-requirements .sr-compat-list li::before{
    content: "✓";
    font-size: 0.75rem;
    font-weight: 700;
    color: #1a1a2e;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(111, 62%, 55%, 0.1);
    }
    main.system-requirements .sr-note-section{
    border-top: 1px solid var(--page-border, #dbd7d4);
    }
    main.system-requirements .sr-notes{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    }
    main.system-requirements .sr-note-item{
    display: flex;
    gap: 16px;
    }
    main.system-requirements .sr-note-item__num{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 2rem;
    font-weight: 700;
    color: hsla(15, 78%, 55%, 0.15);
    line-height: 1;
    flex-shrink: 0;
    }
    main.system-requirements .sr-note-item h3{
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--page-text, #1f1a17);
    }
    main.system-requirements .sr-note-item p{
    font-size: 0.85rem;
    color: var(--page-muted, #7d7672);
    line-height: 1.6;
    }
    main.system-requirements .sr-note-item a{
    color: var(--page-primary, #d96a3a);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
    }
    main.system-requirements .sr-note-item a:hover{
    border-bottom-color: var(--page-primary, #d96a3a);
    }
    main.system-requirements .sr-cta{
    background: var(--page-dark, #181d24);
    text-align: center;
    padding: 72px 24px;
    }
    main.system-requirements .sr-cta h2{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: #ffffff;
    margin-bottom: 12px;
    }
    main.system-requirements .sr-cta p{
    color: hsla(0,0%,100%,0.55);
    font-size: 0.95rem;
    margin-bottom: 32px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    }
    main.system-requirements .sr-cta .jewel{
    font-size: 1rem;
    padding: 16px 40px;
    }
    main.system-requirements .basalt{
    background: var(--page-dark, #181d24);
    border-top: 1px solid hsla(0,0%,100%,0.06);
    padding: 40px 24px;
    }
    main.system-requirements .sr-footer__inner{
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    }
    main.system-requirements .sr-footer__brand{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    }
    main.system-requirements .sr-footer__copy{
    font-size: 0.8rem;
    color: hsla(0,0%,100%,0.35);
    }
    main.system-requirements .sr-footer__links{
    display: flex;
    gap: 24px;
    list-style: none;
    }
    main.system-requirements .sr-footer__links a{
    font-size: 0.8rem;
    color: hsla(0,0%,100%,0.45);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.system-requirements .sr-footer__links a:hover{
    color: hsla(0,0%,100%,0.8);
    }
    @media (max-width: 960px) {main.system-requirements .cedar{
    grid-template-columns: repeat(2, 1fr);
    }
    main.system-requirements .wren{
    grid-template-columns: 1fr;
    }
    main.system-requirements .sr-compat-grid{
    grid-template-columns: 1fr;
    }}
    @media (max-width: 640px) {main.system-requirements .cedar{
    grid-template-columns: 1fr;
    }
    main.system-requirements .sr-notes{
    grid-template-columns: 1fr;
    }
    main.system-requirements .surge{
    padding: 80px 20px 60px;
    }
    main.system-requirements .raven{
    padding: 56px 20px;
    }
    main.system-requirements .grain{
    padding: 24px 20px;
    }
    main.system-requirements .sr-footer__inner{
    flex-direction: column;
    text-align: center;
    }}
    main.system-requirements .basalt{
    background: hsl(20, 8%, 8%);
    border-top: 1px solid var(--border-color, hsla(15, 10%, 80%, 0.1));
    padding: 64px 24px 32px;
    font-family: "Georgia", "Noto Serif SC", serif;
    }
    main.system-requirements .knot{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    width: 100%;
    }
    main.system-requirements .nimbus{
    display: flex;
    gap: 64px;
    margin-bottom: 48px;
    }
    main.system-requirements .hollow{
    flex: 0 0 280px;
    }
    main.system-requirements .marsh{
    display: inline-block;
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
    background: linear-gradient(135deg, var(--primary-color, hsl(15, 78%, 55%)), hsl(30, 80%, 62%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    }
    main.system-requirements .vale{
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-muted, hsl(15, 6%, 56%));
    margin: 0;
    }
    main.system-requirements .phantom{
    display: flex;
    flex: 1 1 auto;
    gap: 48px;
    }
    main.system-requirements .glacier{
    flex: 1 1 0;
    }
    main.system-requirements .nomad{
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color, hsl(15, 8%, 88%));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 20px;
    font-family: -apple-system, "Segoe UI", sans-serif;
    }
    main.system-requirements .urchin{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    }
    main.system-requirements .summit{
    line-height: 1;
    }
    main.system-requirements .inlet{
    font-size: 14px;
    color: var(--text-muted, hsl(15, 6%, 56%));
    text-decoration: none;
    transition: var(--transition, all 0.25s cubic-bezier(0.4, 0, 0.2, 1));
    display: inline-block;
    }
    main.system-requirements .inlet:hover{
    color: var(--primary-color, hsl(15, 78%, 55%));
    }
    main.system-requirements .yonder{
    height: 1px;
    background: var(--border-color, hsla(15, 10%, 80%, 0.1));
    margin-bottom: 28px;
    }
    main.system-requirements .mirage{
    display: flex;
    align-items: center;
    justify-content: space-between;
    }
    main.system-requirements .alder{
    font-size: 13px;
    color: var(--text-muted, hsl(15, 6%, 56%));
    margin: 0;
    font-family: -apple-system, "Segoe UI", sans-serif;
    flex: 1 1 auto;
    }
    main.system-requirements .opal{
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    }
    main.system-requirements .shard{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color, hsla(15, 10%, 80%, 0.1));
    color: var(--text-muted, hsl(15, 6%, 56%));
    transition: var(--transition, all 0.25s cubic-bezier(0.4, 0, 0.2, 1));
    }
    main.system-requirements .shard:hover{
    color: var(--primary-color, hsl(15, 78%, 55%));
    border-color: var(--primary-color, hsl(15, 78%, 55%));
    background: hsla(15, 78%, 55%, 0.08);
    }
    main.system-requirements .ember{
    width: 18px;
    height: 18px;
    }
    @media (max-width: 768px) {main.system-requirements .basalt{
    padding: 48px 20px 28px;
    }
    main.system-requirements .nimbus{
    flex-direction: column;
    gap: 40px;
    }
    main.system-requirements .hollow{
    flex: 0 0 auto;
    }
    main.system-requirements .phantom{
    flex-wrap: wrap;
    gap: 32px;
    }
    main.system-requirements .glacier{
    flex: 0 0 calc(50% - 16px);
    }
    main.system-requirements .mirage{
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    }
    main.system-requirements .opal{
    align-self: flex-start;
    }}

    body {
    padding-top: var(--nav-height);
    }
    
    .ember_drift {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    }
    
    .joltWave {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-width);
    height: 100%;
    margin: 0 auto;
    padding: 0 28px;
    }
    
    .mosaic {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    }
    .flicker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--primary-color), hsl(25, 85%, 60%));
    color: #1a1a2e;
    font-family: "Georgia", serif;
    font-size: 17px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    }
    .blotch {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.5px;
    }
    
    .lx5 {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .sable {
    position: relative;
    }
    .gn2p {
    display: block;
    padding: 8px 14px;
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    letter-spacing: 0.2px;
    }
    .gn2p:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.08);
    }
    
    .prism {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    background: linear-gradient(135deg, var(--primary-color), hsl(8, 75%, 50%));
    color: var(--btn-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 10px hsla(15, 78%, 55%, 0.35);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.3px;
    }
    .prism:hover {
    background: linear-gradient(135deg, hsl(15, 82%, 48%), hsl(8, 80%, 44%));
    box-shadow: 0 4px 18px hsla(15, 78%, 55%, 0.5);
    transform: translateY(-1px);
    }
    .prism:active {
    transform: translateY(0);
    box-shadow: 0 1px 6px hsla(15, 78%, 55%, 0.3);
    }
    .xr9 {
    font-size: 13px;
    line-height: 1;
    }
    .fathom {
    width: 100%;
    justify-content: center;
    padding: 14px 22px;
    font-size: 15px;
    }
    
    .dwq8 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: 1px solid var(--nav-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    }
    .dwq8:hover {
    background: hsla(15, 10%, 80%, 0.08); color: #1a1a2e;}
    .tandem_hue {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 1px;
    transition: var(--transition);
    }
    
    .vortex {
    display: none;
    position: fixed;
    inset: 0;
    background: hsla(0, 0%, 0%, 0.55);
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.3s ease;
    }
    .vortex.is-active {
    display: block;
    opacity: 1;
    }
    
    .zephyr {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: hsl(20, 6%, 12%);
    border-left: 1px solid var(--nav-border);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-lg);
    }
    .zephyr.is-open {
    transform: translateX(0);
    }
    .pylon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: var(--nav-height);
    border-bottom: 1px solid var(--nav-border);
    flex-shrink: 0;
    }
    .rumble_fox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: 1px solid var(--nav-border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
    }
    .rumble_fox:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.08);
    }
    .cobalt {
    list-style: none;
    margin: 0;
    padding: 12px 0;
    flex: 1;
    overflow-y: auto;
    }
    .quirk {
    margin: 0;
    }
    .cragMist {
    display: block;
    padding: 14px 24px;
    font-size: 15px;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    border-left: 3px solid transparent;
    }
    .cragMist:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.06);
    border-left-color: var(--primary-color);
    }
    .kv3 {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--nav-border);
    flex-shrink: 0;
    }
    
    @media (max-width: 960px) {.lx5 {
    display: none;
    }
    .prism:not(.nav-cta--full) {
    display: none;
    }
    .dwq8 {
    display: flex;
    }}

    .dwq8.is-active .tandem_hue:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    }
    .dwq8.is-active .tandem_hue:nth-child(2) {
    opacity: 0;
    }
    .dwq8.is-active .tandem_hue:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    }
    .gn2p.active {color: #1a1a2e; background: hsla(15, 10%, 80%, 0.08);}
    .cragMist.active {color: #1a1a2e; background: hsla(15, 10%, 80%, 0.06); border-left-color: var(--primary-color);}
    @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap");
    main.beginner-guide .indigo *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    main.beginner-guide .indigo{
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--guide-bg-dark);
    color: var(--guide-text-on-dark);
    line-height: 1.7;
    overflow-x: hidden;
    }
    main.beginner-guide .indigo h1, main.beginner-guide .indigo h2, main.beginner-guide .indigo h3, main.beginner-guide .indigo h4{
    font-family: "Playfair Display", Georgia, serif;
    line-height: 1.3;
    }
    main.beginner-guide .thorn{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    }
    
    main.beginner-guide .onyx{
    position: relative;
    padding: 100px 0 80px;
    overflow: hidden;
    }
    main.beginner-guide .onyx::before{
    content: "";
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--guide-accent-glow) 0%, transparent 70%);
    pointer-events: none;
    }
    main.beginner-guide .onyx::after{
    content: "";
    position: absolute;
    bottom: -100px;
    left: -150px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, hsla(111, 62%, 55%, 0.08) 0%, transparent 70%);
    pointer-events: none; color: #1a1a2e;}
    main.beginner-guide .phantom{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
    }
    main.beginner-guide .cirrus{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--guide-bg-card);
    border: 1px solid var(--guide-border);
    font-size: 13px;
    font-weight: 600;
    color: var(--guide-primary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 24px;
    }
    main.beginner-guide .cirrus::before{
    content: "";
    width: 8px;
    height: 8px;
    background: var(--guide-primary);
    display: inline-block;
    }
    main.beginner-guide .onyx h1{
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: 700;
    color: var(--guide-text-on-dark);
    margin-bottom: 20px;
    letter-spacing: -0.5px;
    }
    main.beginner-guide .onyx h1 span{
    color: var(--guide-primary);
    }
    main.beginner-guide .dune{
    font-size: 17px;
    color: var(--guide-text-muted);
    margin-bottom: 36px;
    max-width: 520px;
    }
    main.beginner-guide .obsidian{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    }
    main.beginner-guide .yarrow{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--guide-primary), var(--guide-primary-dark));
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 20px hsla(15, 78%, 55%, 0.35);
    }
    main.beginner-guide .yarrow:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 28px hsla(15, 78%, 55%, 0.45);
    }
    main.beginner-guide .jade{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--guide-bg-card);
    color: var(--guide-text-on-dark);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--guide-border);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    }
    main.beginner-guide .jade:hover{
    background: var(--guide-bg-card-hover);
    border-color: var(--guide-text-muted);
    }
    main.beginner-guide .walnut{
    position: relative;
    }
    main.beginner-guide .ridge{
    position: relative;
    overflow: hidden;
    border: 1px solid var(--guide-border);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    }
    main.beginner-guide .ridge img{
    width: 100%;
    height: auto;
    display: block;
    }
    main.beginner-guide .brine{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    font-size: 13px;
    color: hsla(0,0%,100%,0.8);
    }
    
    main.beginner-guide .ivory{
    padding: 60px 0;
    border-top: 1px solid var(--guide-border);
    border-bottom: 1px solid var(--guide-border);
    }
    main.beginner-guide .quartz{
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--guide-primary);
    margin-bottom: 12px;
    }
    main.beginner-guide .ivory h2{
    font-size: clamp(24px, 3vw, 36px);
    margin-bottom: 48px;
    color: var(--guide-text-on-dark);
    }
    main.beginner-guide .fennel{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    }
    main.beginner-guide .zenith{
    padding: 32px 24px;
    background: var(--guide-bg-card);
    border: 1px solid var(--guide-border);
    transition: border-color 0.25s, background 0.25s, transform 0.25s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
    }
    main.beginner-guide .zenith:hover{
    border-color: var(--guide-primary);
    background: var(--guide-bg-card-hover);
    transform: translateY(-4px);
    }
    main.beginner-guide .quill{
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--guide-accent-glow);
    margin-bottom: 20px;
    font-size: 22px;
    }
    main.beginner-guide .zenith h3{
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--guide-text-on-dark);
    font-family: "Inter", sans-serif;
    }
    main.beginner-guide .zenith p{
    font-size: 14px;
    color: var(--guide-text-muted);
    line-height: 1.6;
    }
    main.beginner-guide .glyph{
    font-family: "Playfair Display", serif;
    font-size: 42px;
    font-weight: 700;
    color: hsla(15, 78%, 55%, 0.15);
    margin-bottom: 12px;
    line-height: 1;
    }
    
    main.beginner-guide .nutmeg{
    padding: 80px 0;
    }
    main.beginner-guide .nutmeg h2{
    font-size: clamp(24px, 3vw, 36px);
    margin-bottom: 16px;
    color: var(--guide-text-on-dark);
    }
    main.beginner-guide .latch{
    font-size: 16px;
    color: var(--guide-text-muted);
    margin-bottom: 56px;
    max-width: 600px;
    }
    main.beginner-guide .timber{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 80px;
    position: relative;
    }
    main.beginner-guide .timber:last-child{
    margin-bottom: 0;
    }
    main.beginner-guide .timber.velvet{
    direction: rtl;
    }
    main.beginner-guide .timber.velvet > *{
    direction: ltr;
    }
    main.beginner-guide .slate{
    position: relative;
    }
    main.beginner-guide .lantern{
    font-family: "Playfair Display", serif;
    font-size: 72px;
    font-weight: 700;
    color: hsla(15, 78%, 55%, 0.1);
    line-height: 1;
    margin-bottom: 16px;
    }
    main.beginner-guide .slate h3{
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--guide-text-on-dark);
    }
    main.beginner-guide .slate p{
    font-size: 15px;
    color: var(--guide-text-muted);
    margin-bottom: 20px;
    line-height: 1.8;
    }
    main.beginner-guide .grotto{
    list-style: none;
    padding: 0;
    }
    main.beginner-guide .grotto li{
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--guide-text-muted);
    }
    main.beginner-guide .grotto li::before{
    content: "→";
    position: absolute;
    left: 0;
    color: var(--guide-primary);
    font-weight: 700;
    }
    main.beginner-guide .forge{
    position: relative;
    overflow: hidden;
    border: 1px solid var(--guide-border);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
    }
    main.beginner-guide .forge img{
    width: 100%;
    height: auto;
    display: block;
    }
    
    main.beginner-guide .guide-features{
    padding: 80px 0;
    border-top: 1px solid var(--guide-border);
    }
    main.beginner-guide .guide-features h2{
    font-size: clamp(24px, 3vw, 36px);
    margin-bottom: 16px;
    color: var(--guide-text-on-dark);
    }
    main.beginner-guide .guide-features-subtitle{
    font-size: 16px;
    color: var(--guide-text-muted);
    margin-bottom: 48px;
    max-width: 600px;
    }
    main.beginner-guide .guide-features-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    }
    main.beginner-guide .guide-feature-card{
    padding: 36px 28px;
    background: var(--guide-bg-card);
    border: 1px solid var(--guide-border);
    transition: border-color 0.25s, transform 0.25s;
    }
    main.beginner-guide .guide-feature-card:hover{
    border-color: var(--guide-secondary);
    transform: translateY(-3px);
    }
    main.beginner-guide .guide-feature-icon{
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 20px;
    background: hsla(111, 62%, 55%, 0.1);
    color: #1a1a2e;
    }
    main.beginner-guide .guide-feature-card h3{
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--guide-text-on-dark);
    font-family: "Inter", sans-serif;
    }
    main.beginner-guide .guide-feature-card p{
    font-size: 14px;
    color: var(--guide-text-muted);
    line-height: 1.7;
    }
    
    main.beginner-guide .guide-tips{
    padding: 80px 0;
    border-top: 1px solid var(--guide-border);
    }
    main.beginner-guide .guide-tips h2{
    font-size: clamp(24px, 3vw, 36px);
    margin-bottom: 48px;
    color: var(--guide-text-on-dark);
    }
    main.beginner-guide .guide-tips-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    }
    main.beginner-guide .guide-tip-card{
    display: flex;
    gap: 20px;
    padding: 28px 24px;
    background: var(--guide-bg-card);
    border: 1px solid var(--guide-border);
    transition: border-color 0.25s;
    }
    main.beginner-guide .guide-tip-card:hover{
    border-color: var(--guide-primary);
    }
    main.beginner-guide .guide-tip-icon{
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--guide-accent-glow);
    font-size: 18px;
    }
    main.beginner-guide .guide-tip-card h3{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--guide-text-on-dark);
    font-family: "Inter", sans-serif;
    }
    main.beginner-guide .guide-tip-card p{
    font-size: 14px;
    color: var(--guide-text-muted);
    line-height: 1.6;
    }
    
    main.beginner-guide .guide-faq{
    padding: 80px 0;
    border-top: 1px solid var(--guide-border);
    }
    main.beginner-guide .guide-faq h2{
    font-size: clamp(24px, 3vw, 36px);
    margin-bottom: 48px;
    color: var(--guide-text-on-dark);
    }
    main.beginner-guide .guide-faq-list{
    max-width: 800px;
    }
    main.beginner-guide .guide-faq-item{
    border-bottom: 1px solid var(--guide-border);
    padding: 24px 0;
    }
    main.beginner-guide .guide-faq-item summary{
    font-size: 16px;
    font-weight: 600;
    color: var(--guide-text-on-dark);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    }
    main.beginner-guide .guide-faq-item summary::-webkit-details-marker{
    display: none;
    }
    main.beginner-guide .guide-faq-item summary::after{
    content: "+";
    font-size: 22px;
    color: var(--guide-primary);
    flex-shrink: 0;
    font-weight: 300;
    transition: transform 0.2s;
    }
    main.beginner-guide .guide-faq-item[open] summary::after{
    content: "−";
    }
    main.beginner-guide .guide-faq-answer{
    padding-top: 16px;
    font-size: 15px;
    color: var(--guide-text-muted);
    line-height: 1.8;
    }
    main.beginner-guide .guide-faq-answer a{
    color: var(--guide-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
    }
    main.beginner-guide .guide-faq-answer a:hover{
    border-bottom-color: var(--guide-primary);
    }
    
    main.beginner-guide .guide-cta{
    padding: 80px 0;
    border-top: 1px solid var(--guide-border);
    }
    main.beginner-guide .guide-cta-box{
    padding: 64px 48px;
    background: linear-gradient(135deg, var(--guide-bg-card) 0%, hsl(220, 18%, 16%) 100%);
    border: 1px solid var(--guide-border);
    text-align: center;
    position: relative;
    overflow: hidden;
    }
    main.beginner-guide .guide-cta-box::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--guide-primary), var(--guide-secondary));
    }
    main.beginner-guide .guide-cta-box h2{
    font-size: clamp(24px, 3vw, 34px);
    margin-bottom: 16px;
    color: var(--guide-text-on-dark);
    }
    main.beginner-guide .guide-cta-box p{
    font-size: 16px;
    color: var(--guide-text-muted);
    margin-bottom: 36px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    }
    main.beginner-guide .guide-cta-actions{
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    }
    
    main.beginner-guide .guide-footer{
    padding: 48px 0;
    border-top: 1px solid var(--guide-border);
    text-align: center;
    }
    main.beginner-guide .guide-footer-brand{
    font-family: "Playfair Display", serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--guide-text-on-dark);
    margin-bottom: 8px;
    }
    main.beginner-guide .guide-footer-tagline{
    font-size: 13px;
    color: var(--guide-text-muted);
    margin-bottom: 20px;
    }
    main.beginner-guide .guide-footer-links{
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    }
    main.beginner-guide .guide-footer-links a{
    font-size: 13px;
    color: var(--guide-text-muted);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.beginner-guide .guide-footer-links a:hover{
    color: var(--guide-primary);
    }
    main.beginner-guide .guide-footer-copy{
    font-size: 12px;
    color: hsla(220, 8%, 58%, 0.6);
    }
    
    main.beginner-guide .juniper{
    color: var(--guide-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
    }
    main.beginner-guide .juniper:hover{
    border-bottom-color: var(--guide-primary);
    }
    
    @media (max-width: 1024px) {main.beginner-guide .fennel{
    grid-template-columns: repeat(2, 1fr);
    }
    main.beginner-guide .guide-features-grid{
    grid-template-columns: repeat(2, 1fr);
    }}
    @media (max-width: 768px) {main.beginner-guide .phantom{
    grid-template-columns: 1fr;
    gap: 40px;
    }
    main.beginner-guide .timber, main.beginner-guide .timber.velvet{
    grid-template-columns: 1fr;
    gap: 32px;
    direction: ltr;
    }
    main.beginner-guide .fennel{
    grid-template-columns: 1fr;
    }
    main.beginner-guide .guide-features-grid{
    grid-template-columns: 1fr;
    }
    main.beginner-guide .guide-tips-grid{
    grid-template-columns: 1fr;
    }
    main.beginner-guide .guide-cta-box{
    padding: 40px 24px;
    }
    main.beginner-guide .onyx{
    padding: 60px 0 40px;
    }}
    main.beginner-guide .clover{
    background: hsl(20, 8%, 8%);
    border-top: 1px solid var(--border-color, hsla(15, 10%, 80%, 0.1));
    padding: 64px 24px 0;
    font-family: "Noto Serif SC", Georgia, "Times New Roman", serif;
    color: var(--text-color, hsl(15, 8%, 88%));
    }
    main.beginner-guide .glacier{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    }
    main.beginner-guide .pebble{
    flex: 1 1 260px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    }
    main.beginner-guide .marble{
    display: flex;
    align-items: center;
    gap: 10px;
    }
    main.beginner-guide .wicker{
    flex: 0 0 28px;
    }
    main.beginner-guide .moss{
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    }
    main.beginner-guide .ember{
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-muted, hsl(15, 6%, 56%));
    margin: 0;
    max-width: 260px;
    }
    main.beginner-guide .cipher{
    display: flex;
    gap: 10px;
    margin-top: 4px;
    }
    main.beginner-guide .spruce{
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid hsla(15, 10%, 80%, 0.12);
    color: var(--text-muted, hsl(15, 6%, 56%));
    text-decoration: none;
    transition: var(--transition, all 0.25s cubic-bezier(0.4, 0, 0.2, 1));
    }
    main.beginner-guide .spruce:hover{
    color: hsl(15, 78%, 55%);
    border-color: hsl(15, 78%, 55%);
    background: hsla(15, 78%, 55%, 0.08);
    }
    main.beginner-guide .kelp{
    flex: 0 1 140px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    }
    main.beginner-guide .etch{
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: hsla(15, 8%, 88%, 0.5);
    margin: 0 0 4px;
    }
    main.beginner-guide .husk{
    font-size: 14px;
    color: var(--text-muted, hsl(15, 6%, 56%));
    text-decoration: none;
    transition: var(--transition, all 0.25s cubic-bezier(0.4, 0, 0.2, 1));
    line-height: 1.4;
    }
    main.beginner-guide .husk:hover{
    color: #fff;
    }
    main.beginner-guide .yarn{
    flex: 0 1 200px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    }
    main.beginner-guide .dewdrop{
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color, hsl(15, 8%, 88%));
    margin: 0;
    }
    main.beginner-guide .orchid{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    background: linear-gradient(135deg, hsl(15, 78%, 55%), hsl(15, 85%, 48%));
    text-decoration: none;
    box-shadow: 0 4px 18px hsla(15, 78%, 45%, 0.35);
    transition: var(--transition, all 0.25s cubic-bezier(0.4, 0, 0.2, 1));
    letter-spacing: 0.02em;
    }
    main.beginner-guide .orchid:hover{
    box-shadow: 0 6px 24px hsla(15, 78%, 45%, 0.5);
    transform: translateY(-1px);
    background: linear-gradient(135deg, hsl(15, 82%, 58%), hsl(15, 78%, 50%));
    }
    main.beginner-guide .alloy{
    max-width: var(--max-width, 1200px);
    margin: 48px auto 0;
    height: 1px;
    background: hsla(15, 10%, 80%, 0.08); color: #1a1a2e;}
    main.beginner-guide .helix{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    padding: 24px 0 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    }
    main.beginner-guide .aurora{
    font-size: 13px;
    color: var(--text-muted, hsl(15, 6%, 56%));
    flex: 1 1 auto;
    }
    main.beginner-guide .xylem{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    }
    main.beginner-guide .knoll{
    font-size: 13px;
    color: var(--text-muted, hsl(15, 6%, 56%));
    text-decoration: none;
    transition: var(--transition, all 0.25s cubic-bezier(0.4, 0, 0.2, 1));
    }
    main.beginner-guide .knoll:hover{
    color: hsl(15, 78%, 55%);
    }
    main.beginner-guide .bastion{
    color: hsla(15, 10%, 80%, 0.2);
    font-size: 13px;
    }
    @media (max-width: 768px) {main.beginner-guide .clover{
    padding: 40px 20px 0;
    }
    main.beginner-guide .glacier{
    gap: 32px;
    }
    main.beginner-guide .pebble{
    flex: 1 1 100%;
    }
    main.beginner-guide .kelp{
    flex: 1 1 calc(50% - 20px);
    min-width: 120px;
    }
    main.beginner-guide .yarn{
    flex: 1 1 100%;
    align-items: stretch;
    }
    main.beginner-guide .orchid{
    text-align: center;
    }
    main.beginner-guide .helix{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 0 28px;
    }
    main.beginner-guide .alloy{
    margin-top: 32px;
    }}
    main.beginner-guide .umber{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    }

    body {
    padding-top: var(--nav-height);
    }
    
    .ember_drift {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    }
    
    .joltWave {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-width);
    height: 100%;
    margin: 0 auto;
    padding: 0 28px;
    }
    
    .mosaic {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    }
    .flicker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--primary-color), hsl(25, 85%, 60%));
    color: #1a1a2e;
    font-family: "Georgia", serif;
    font-size: 17px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    }
    .blotch {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.5px;
    }
    
    .lx5 {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .sable {
    position: relative;
    }
    .gn2p {
    display: block;
    padding: 8px 14px;
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    letter-spacing: 0.2px;
    }
    .gn2p:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.08);
    }
    
    .prism {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    background: linear-gradient(135deg, var(--primary-color), hsl(8, 75%, 50%));
    color: var(--btn-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 10px hsla(15, 78%, 55%, 0.35);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.3px;
    }
    .prism:hover {
    background: linear-gradient(135deg, hsl(15, 82%, 48%), hsl(8, 80%, 44%));
    box-shadow: 0 4px 18px hsla(15, 78%, 55%, 0.5);
    transform: translateY(-1px);
    }
    .prism:active {
    transform: translateY(0);
    box-shadow: 0 1px 6px hsla(15, 78%, 55%, 0.3);
    }
    .xr9 {
    font-size: 13px;
    line-height: 1;
    }
    .fathom {
    width: 100%;
    justify-content: center;
    padding: 14px 22px;
    font-size: 15px;
    }
    
    .dwq8 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: 1px solid var(--nav-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    }
    .dwq8:hover {
    background: hsla(15, 10%, 80%, 0.08); color: #1a1a2e;}
    .tandem_hue {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 1px;
    transition: var(--transition);
    }
    
    .vortex {
    display: none;
    position: fixed;
    inset: 0;
    background: hsla(0, 0%, 0%, 0.55);
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.3s ease;
    }
    .vortex.is-active {
    display: block;
    opacity: 1;
    }
    
    .zephyr {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: hsl(20, 6%, 12%);
    border-left: 1px solid var(--nav-border);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-lg);
    }
    .zephyr.is-open {
    transform: translateX(0);
    }
    .pylon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: var(--nav-height);
    border-bottom: 1px solid var(--nav-border);
    flex-shrink: 0;
    }
    .rumble_fox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: 1px solid var(--nav-border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
    }
    .rumble_fox:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.08);
    }
    .cobalt {
    list-style: none;
    margin: 0;
    padding: 12px 0;
    flex: 1;
    overflow-y: auto;
    }
    .quirk {
    margin: 0;
    }
    .cragMist {
    display: block;
    padding: 14px 24px;
    font-size: 15px;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    border-left: 3px solid transparent;
    }
    .cragMist:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.06);
    border-left-color: var(--primary-color);
    }
    .kv3 {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--nav-border);
    flex-shrink: 0;
    }
    
    @media (max-width: 960px) {.lx5 {
    display: none;
    }
    .prism:not(.nav-cta--full) {
    display: none;
    }
    .dwq8 {
    display: flex;
    }}

    .dwq8.is-active .tandem_hue:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    }
    .dwq8.is-active .tandem_hue:nth-child(2) {
    opacity: 0;
    }
    .dwq8.is-active .tandem_hue:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    }
    .gn2p.active {color: #1a1a2e; background: hsla(15, 10%, 80%, 0.08);}
    .cragMist.active {color: #1a1a2e; background: hsla(15, 10%, 80%, 0.06); border-left-color: var(--primary-color);}
    @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap");
    main.templates *{ margin: 0; padding: 0; box-sizing: border-box; }
    main.templates{
    font-family: var(--tpl-font-body);
    color: var(--tpl-text, #1f1a17);
    background: var(--tpl-bg);
    overflow-x: hidden;
    }
    
    main.templates .haze{
    position: relative;
    background: var(--tpl-hero-gradient);
    padding: 100px 40px 80px;
    overflow: hidden;
    }
    main.templates .haze::before{
    content: "";
    position: absolute;
    top: -120px;
    right: -80px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, hsla(15, 78%, 55%, 0.15) 0%, transparent 70%);
    pointer-events: none;
    }
    main.templates .haze::after{
    content: "";
    position: absolute;
    bottom: -60px;
    left: 20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, hsla(111, 62%, 55%, 0.1) 0%, transparent 70%);
    pointer-events: none; color: #1a1a2e;}
    main.templates .sapphire{
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
    }
    main.templates .haze h1{
    font-family: var(--tpl-font-display);
    font-size: 2.8rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    }
    main.templates .haze h1 span{
    color: var(--tpl-primary);
    }
    main.templates .apex{
    font-size: 1.05rem;
    color: hsla(0, 0%, 100%, 0.72);
    line-height: 1.75;
    margin-bottom: 32px;
    max-width: 520px;
    }
    main.templates .phantom{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    }
    main.templates .isle{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--tpl-primary);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
    box-shadow: 0 4px 16px hsla(15, 78%, 55%, 0.35);
    }
    main.templates .isle:hover{
    background: var(--tpl-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px hsla(15, 78%, 55%, 0.45);
    }
    main.templates .rune{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: transparent;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid hsla(0, 0%, 100%, 0.3);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    }
    main.templates .rune:hover{
    border-color: #ffffff;
    background: hsla(0, 0%, 100%, 0.08); color: #1a1a2e;}
    main.templates .kite{
    position: relative;
    }
    main.templates .kite img{
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    }
    main.templates .junco{
    position: absolute;
    bottom: -16px;
    left: 24px;
    background: var(--tpl-secondary);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 8px 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px hsla(111, 62%, 55%, 0.4);
    }
    
    main.templates .grain{
    max-width: 1200px;
    margin: -30px auto 0;
    padding: 0 40px;
    position: relative;
    z-index: 2;
    }
    main.templates .wren{
    background: var(--tpl-surface);
    padding: 24px 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    border: 1px solid var(--tpl-border);
    }
    main.templates .wren input{
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    font-family: var(--tpl-font-body);
    color: var(--tpl-text);
    background: transparent;
    }
    main.templates .wren input::placeholder{
    color: var(--tpl-text-muted);
    }
    main.templates .plume{
    padding: 10px 28px;
    background: var(--tpl-text);
    color: #ffffff;
    border: none;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--tpl-font-body);
    transition: opacity 0.2s;
    }
    main.templates .plume:hover{
    opacity: 0.85;
    }
    main.templates .pyre{
    width: 20px;
    height: 20px;
    color: var(--tpl-text-muted);
    }
    
    main.templates .vale{
    max-width: 1200px;
    margin: 0 auto;
    padding: 72px 40px 0;
    }
    main.templates .urchin{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 40px;
    }
    main.templates .urchin h2{
    font-family: var(--tpl-font-display);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--tpl-text);
    letter-spacing: -0.01em;
    }
    main.templates .urchin h2 em{
    font-style: normal;
    color: var(--tpl-primary);
    }
    main.templates .flint{
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--tpl-primary);
    text-decoration: none;
    transition: opacity 0.2s;
    }
    main.templates .flint:hover{
    opacity: 0.7;
    }
    main.templates .wisp{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    }
    main.templates .lumen{
    background: var(--tpl-surface);
    border: 1px solid var(--tpl-border);
    padding: 28px 16px;
    text-align: center;
    text-decoration: none;
    color: var(--tpl-text);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    cursor: pointer;
    }
    main.templates .lumen:hover{
    border-color: var(--tpl-primary);
    box-shadow: 0 4px 16px hsla(15, 78%, 55%, 0.12);
    transform: translateY(-2px);
    }
    main.templates .glacier{
    width: 44px;
    height: 44px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    }
    main.templates .lumen h3{
    font-size: 0.92rem;
    font-weight: 600;
    margin-bottom: 4px;
    }
    main.templates .summit{
    font-size: 0.78rem;
    color: var(--tpl-text-muted);
    }
    
    main.templates .nova{
    max-width: 1200px;
    margin: 0 auto;
    padding: 72px 40px 0;
    }
    main.templates .xeno{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    }
    main.templates .jolt{
    background: var(--tpl-surface);
    border: 1px solid var(--tpl-border);
    overflow: hidden;
    transition: box-shadow 0.25s, transform 0.2s;
    }
    main.templates .jolt:hover{
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
    transform: translateY(-3px);
    }
    main.templates .mirth{
    position: relative;
    overflow: hidden;
    height: 200px;
    background: var(--tpl-bg-alt);
    }
    main.templates .mirth img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
    }
    main.templates .jolt:hover .mirth img{
    transform: scale(1.04);
    }
    main.templates .echo{
    position: absolute;
    inset: 0;
    background: hsla(15, 10%, 12%, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s;
    }
    main.templates .jolt:hover .echo{
    opacity: 1;
    }
    main.templates .echo a{
    padding: 10px 24px;
    background: var(--tpl-primary);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
    }
    main.templates .echo a:hover{
    background: var(--tpl-primary-dark);
    }
    main.templates .crux{
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--tpl-text);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    }
    main.templates .lattice{
    background: var(--tpl-primary);
    }
    main.templates .crimson{
    background: var(--tpl-secondary-dark);
    }
    main.templates .basalt{
    padding: 18px 20px;
    }
    main.templates .basalt h3{
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 1.4;
    }
    main.templates .vapor{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--tpl-text-muted);
    }
    main.templates .nimbus{
    background: var(--tpl-bg-alt);
    padding: 2px 8px;
    font-weight: 500;
    }
    
    main.templates .tpl-showcase{
    max-width: 1200px;
    margin: 0 auto;
    padding: 72px 40px 0;
    }
    main.templates .tpl-showcase-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    }
    main.templates .tpl-showcase-card{
    position: relative;
    overflow: hidden;
    height: 320px;
    }
    main.templates .tpl-showcase-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    }
    main.templates .tpl-showcase-content{
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, hsla(15, 10%, 12%, 0.85) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px;
    }
    main.templates .tpl-showcase-content h3{
    font-family: var(--tpl-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
    }
    main.templates .tpl-showcase-content p{
    font-size: 0.88rem;
    color: hsla(0, 0%, 100%, 0.75);
    line-height: 1.6;
    margin-bottom: 16px;
    max-width: 400px;
    }
    main.templates .tpl-showcase-content a{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tpl-primary);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.2s;
    }
    main.templates .tpl-showcase-content a:hover{
    gap: 10px;
    }
    
    main.templates .tpl-stats{
    max-width: 1200px;
    margin: 0 auto;
    padding: 72px 40px 0;
    }
    main.templates .tpl-stats-bar{
    background: var(--tpl-hero-gradient);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    }
    main.templates .tpl-stat-item{
    padding: 40px 24px;
    text-align: center;
    }
    main.templates .tpl-stat-num{
    font-family: var(--tpl-font-display);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--tpl-primary);
    margin-bottom: 6px;
    }
    main.templates .tpl-stat-label{
    font-size: 0.85rem;
    color: hsla(0, 0%, 100%, 0.65);
    font-weight: 500;
    }
    
    main.templates .tpl-howto{
    max-width: 1200px;
    margin: 0 auto;
    padding: 72px 40px 0;
    }
    main.templates .tpl-howto-steps{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
    }
    main.templates .tpl-step{
    background: var(--tpl-surface);
    border: 1px solid var(--tpl-border);
    padding: 36px 28px;
    position: relative;
    }
    main.templates .tpl-step-num{
    font-family: var(--tpl-font-display);
    font-size: 3rem;
    font-weight: 700;
    color: hsla(15, 78%, 55%, 0.12);
    position: absolute;
    top: 16px;
    right: 20px;
    line-height: 1;
    }
    main.templates .tpl-step h3{
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--tpl-text);
    }
    main.templates .tpl-step p{
    font-size: 0.88rem;
    color: var(--tpl-text-muted);
    line-height: 1.7;
    }
    
    main.templates .tpl-recent{
    max-width: 1200px;
    margin: 0 auto;
    padding: 72px 40px 0;
    }
    main.templates .tpl-recent-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 40px;
    }
    main.templates .tpl-recent-item{
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--tpl-surface);
    border: 1px solid var(--tpl-border);
    padding: 20px 24px;
    transition: border-color 0.2s;
    }
    main.templates .tpl-recent-item:hover{
    border-color: var(--tpl-primary);
    }
    main.templates .tpl-recent-icon{
    width: 48px;
    height: 48px;
    background: var(--tpl-bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    }
    main.templates .tpl-recent-info h3{
    font-size: 0.92rem;
    font-weight: 600;
    margin-bottom: 4px;
    }
    main.templates .tpl-recent-info p{
    font-size: 0.78rem;
    color: var(--tpl-text-muted);
    }
    main.templates .tpl-recent-date{
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--tpl-text-muted);
    white-space: nowrap;
    }
    
    main.templates .tpl-cta-banner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 72px 40px 0;
    }
    main.templates .tpl-cta-inner{
    background: var(--tpl-hero-gradient);
    padding: 56px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    }
    main.templates .tpl-cta-text h2{
    font-family: var(--tpl-font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    }
    main.templates .tpl-cta-text p{
    font-size: 0.95rem;
    color: hsla(0, 0%, 100%, 0.7);
    line-height: 1.6;
    max-width: 500px;
    }
    main.templates .tpl-cta-actions{
    display: flex;
    gap: 14px;
    flex-shrink: 0;
    }
    
    main.templates .tpl-footer{
    margin-top: 80px;
    background: var(--tpl-text);
    color: hsla(0, 0%, 100%, 0.6);
    padding: 48px 40px;
    }
    main.templates .tpl-footer-inner{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    }
    main.templates .tpl-footer-brand{
    font-family: var(--tpl-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    }
    main.templates .tpl-footer-brand span{
    display: block;
    font-family: var(--tpl-font-body);
    font-size: 0.78rem;
    font-weight: 400;
    color: hsla(0, 0%, 100%, 0.45);
    margin-top: 4px;
    }
    main.templates .tpl-footer-links{
    display: flex;
    gap: 28px;
    }
    main.templates .tpl-footer-links a{
    color: hsla(0, 0%, 100%, 0.6);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s;
    }
    main.templates .tpl-footer-links a:hover{
    color: #ffffff;
    }
    main.templates .tpl-footer-copy{
    font-size: 0.8rem;
    }
    
    @media (max-width: 1024px) {main.templates .sapphire{
    grid-template-columns: 1fr;
    gap: 40px;
    }
    main.templates .kite{
    max-width: 560px;
    }
    main.templates .wisp{
    grid-template-columns: repeat(3, 1fr);
    }
    main.templates .xeno{
    grid-template-columns: repeat(2, 1fr);
    }
    main.templates .tpl-stats-bar{
    grid-template-columns: repeat(2, 1fr);
    }}
    @media (max-width: 768px) {main.templates .haze{
    padding: 72px 20px 56px;
    }
    main.templates .haze h1{
    font-size: 2rem;
    }
    main.templates .vale, main.templates .nova, main.templates .tpl-showcase, main.templates .tpl-stats, main.templates .tpl-howto, main.templates .tpl-recent, main.templates .tpl-cta-banner{
    padding-left: 20px;
    padding-right: 20px;
    }
    main.templates .grain{
    padding: 0 20px;
    }
    main.templates .wisp{
    grid-template-columns: repeat(2, 1fr);
    }
    main.templates .xeno{
    grid-template-columns: 1fr;
    }
    main.templates .tpl-showcase-grid{
    grid-template-columns: 1fr;
    }
    main.templates .tpl-howto-steps{
    grid-template-columns: 1fr;
    }
    main.templates .tpl-recent-list{
    grid-template-columns: 1fr;
    }
    main.templates .tpl-cta-inner{
    flex-direction: column;
    text-align: center;
    padding: 40px 24px;
    }
    main.templates .tpl-cta-actions{
    flex-direction: column;
    width: 100%;
    }
    main.templates .tpl-cta-actions a{
    justify-content: center;
    }
    main.templates .tpl-footer-inner{
    flex-direction: column;
    text-align: center;
    }
    main.templates .tpl-footer-links{
    flex-wrap: wrap;
    justify-content: center;
    }
    main.templates .urchin{
    flex-direction: column;
    gap: 8px;
    }}
    @media (max-width: 480px) {main.templates .haze h1{
    font-size: 1.65rem;
    }
    main.templates .wisp{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    }
    main.templates .wren{
    flex-direction: column;
    gap: 12px;
    }
    main.templates .plume{
    width: 100%;
    }
    main.templates .phantom{
    flex-direction: column;
    }
    main.templates .phantom a{
    justify-content: center;
    }}
    main.templates .nectar{
    background: hsl(20, 8%, 8%);
    border-top: 1px solid var(--border-color);
    padding: 64px 24px 0;
    font-family: "Georgia", "Noto Serif SC", serif;
    }
    main.templates .oxide{
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
    }
    main.templates .orbit{
    display: flex;
    gap: 48px;
    padding-bottom: 48px;
    }
    main.templates .drift{
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    }
    main.templates .umbra{
    font-size: 22px;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: -0.02em;
    font-family: "Georgia", "Noto Serif SC", serif;
    }
    main.templates .fern{
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
    }
    main.templates .ridgeline{
    display: flex;
    flex: 1 1 auto;
    gap: 40px;
    }
    main.templates .inlet{
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    }
    main.templates .falcon{
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
    font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
    }
    main.templates .grove{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }
    main.templates .helm{
    line-height: 1;
    }
    main.templates .cedar{
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
    }
    main.templates .cedar:hover{
    color: var(--primary-color);
    }
    main.templates .dusk{
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 16px;
    text-align: right;
    }
    main.templates .pulse{
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
    }
    main.templates .shard{
    display: inline-block;
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--primary-color), hsl(8, 72%, 50%));
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px hsla(15, 78%, 55%, 0.35);
    transition: var(--transition);
    font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
    }
    main.templates .shard:hover{
    transform: translateY(-1px);
    box-shadow: 0 6px 28px hsla(15, 78%, 55%, 0.5);
    }
    main.templates .mote{
    height: 1px;
    background: var(--border-color);
    width: 100%;
    }
    main.templates .bloom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0;
    gap: 16px;
    }
    main.templates .opal{
    font-size: 13px;
    color: var(--text-muted);
    flex: 0 1 auto;
    font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
    }
    main.templates .cinder{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    }
    main.templates .tundra{
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
    }
    main.templates .tundra:hover{
    color: var(--primary-color);
    }
    main.templates .nook{
    color: hsla(15, 10%, 80%, 0.2);
    font-size: 13px;
    user-select: none;
    }
    @media (max-width: 860px) {main.templates .orbit{
    flex-direction: column;
    gap: 36px;
    }
    main.templates .drift{
    flex: 0 0 auto;
    }
    main.templates .ridgeline{
    flex-wrap: wrap;
    gap: 32px;
    }
    main.templates .inlet{
    flex: 1 1 140px;
    }
    main.templates .dusk{
    flex: 0 0 auto;
    align-items: flex-start;
    text-align: left;
    }
    main.templates .bloom{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    }}
    @media (max-width: 480px) {main.templates .nectar{
    padding: 40px 16px 0;
    }
    main.templates .ridgeline{
    flex-direction: column;
    gap: 28px;
    }
    main.templates .inlet{
    flex: 1 1 auto;
    }
    main.templates .cinder{
    flex-wrap: wrap;
    }}

    body {
    padding-top: var(--nav-height);
    }
    
    .ember_drift {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    }
    
    .joltWave {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-width);
    height: 100%;
    margin: 0 auto;
    padding: 0 28px;
    }
    
    .mosaic {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    }
    .flicker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--primary-color), hsl(25, 85%, 60%));
    color: #1a1a2e;
    font-family: "Georgia", serif;
    font-size: 17px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    }
    .blotch {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.5px;
    }
    
    .lx5 {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .sable {
    position: relative;
    }
    .gn2p {
    display: block;
    padding: 8px 14px;
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    letter-spacing: 0.2px;
    }
    .gn2p:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.08);
    }
    
    .prism {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    background: linear-gradient(135deg, var(--primary-color), hsl(8, 75%, 50%));
    color: var(--btn-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 10px hsla(15, 78%, 55%, 0.35);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.3px;
    }
    .prism:hover {
    background: linear-gradient(135deg, hsl(15, 82%, 48%), hsl(8, 80%, 44%));
    box-shadow: 0 4px 18px hsla(15, 78%, 55%, 0.5);
    transform: translateY(-1px);
    }
    .prism:active {
    transform: translateY(0);
    box-shadow: 0 1px 6px hsla(15, 78%, 55%, 0.3);
    }
    .xr9 {
    font-size: 13px;
    line-height: 1;
    }
    .fathom {
    width: 100%;
    justify-content: center;
    padding: 14px 22px;
    font-size: 15px;
    }
    
    .dwq8 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: 1px solid var(--nav-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    }
    .dwq8:hover {
    background: hsla(15, 10%, 80%, 0.08); color: #1a1a2e;}
    .tandem_hue {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 1px;
    transition: var(--transition);
    }
    
    .vortex {
    display: none;
    position: fixed;
    inset: 0;
    background: hsla(0, 0%, 0%, 0.55);
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.3s ease;
    }
    .vortex.is-active {
    display: block;
    opacity: 1;
    }
    
    .zephyr {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: hsl(20, 6%, 12%);
    border-left: 1px solid var(--nav-border);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-lg);
    }
    .zephyr.is-open {
    transform: translateX(0);
    }
    .pylon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: var(--nav-height);
    border-bottom: 1px solid var(--nav-border);
    flex-shrink: 0;
    }
    .rumble_fox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: 1px solid var(--nav-border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
    }
    .rumble_fox:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.08);
    }
    .cobalt {
    list-style: none;
    margin: 0;
    padding: 12px 0;
    flex: 1;
    overflow-y: auto;
    }
    .quirk {
    margin: 0;
    }
    .cragMist {
    display: block;
    padding: 14px 24px;
    font-size: 15px;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    border-left: 3px solid transparent;
    }
    .cragMist:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.06);
    border-left-color: var(--primary-color);
    }
    .kv3 {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--nav-border);
    flex-shrink: 0;
    }
    
    @media (max-width: 960px) {.lx5 {
    display: none;
    }
    .prism:not(.nav-cta--full) {
    display: none;
    }
    .dwq8 {
    display: flex;
    }}

    .dwq8.is-active .tandem_hue:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    }
    .dwq8.is-active .tandem_hue:nth-child(2) {
    opacity: 0;
    }
    .dwq8.is-active .tandem_hue:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    }
    .gn2p.active {color: #1a1a2e; background: hsla(15, 10%, 80%, 0.08);}
    .cragMist.active {color: #1a1a2e; background: hsla(15, 10%, 80%, 0.06); border-left-color: var(--primary-color);}
    @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap");
    main.update-log .cipher{
    position: relative;
    overflow: hidden;
    background: var(--changelog-dark);
    padding: 100px 24px 80px;
    text-align: center;
    }
    main.update-log .cipher::before{
    content: "";
    position: absolute;
    top: -40%;
    left: -20%;
    width: 140%;
    height: 180%;
    background:
    radial-gradient(ellipse 600px 400px at 30% 20%, hsla(15, 78%, 55%, 0.15), transparent),
    radial-gradient(ellipse 500px 350px at 70% 70%, hsla(111, 62%, 55%, 0.1), transparent),
    radial-gradient(ellipse 300px 300px at 50% 50%, hsla(220, 65%, 50%, 0.08), transparent);
    pointer-events: none; color: #1a1a2e;}
    main.update-log .cipher::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, hsla(15, 78%, 55%, 0.4), transparent);
    }
    main.update-log .forge{
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    }
    main.update-log .cipher h1{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    color: hsl(0, 0%, 96%);
    line-height: 1.3;
    margin: 0 0 20px;
    letter-spacing: -0.02em;
    }
    main.update-log .karma{
    font-family: "Inter", sans-serif;
    font-size: 1.05rem;
    color: hsl(15, 6%, 62%);
    line-height: 1.7;
    margin: 0 0 36px;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    }
    main.update-log .bramble{
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.update-log .quiver{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--changelog-primary), hsl(20, 82%, 48%));
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 20px hsla(15, 78%, 55%, 0.35);
    }
    main.update-log .quiver:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 28px hsla(15, 78%, 55%, 0.45);
    }
    main.update-log .jubilee{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: hsla(0, 0%, 100%, 0.06);
    color: #1a1a2e;
    font-family: "Inter", sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid hsla(0, 0%, 100%, 0.1);
    transition: background 0.2s, border-color 0.2s;
    }
    main.update-log .jubilee:hover{
    background: hsla(0, 0%, 100%, 0.1);
    border-color: hsla(0, 0%, 100%, 0.2); color: #1a1a2e;}
    main.update-log .quartz{
    background: var(--changelog-bg, #f2f0ee);
    padding: 80px 24px;
    }
    main.update-log .ember{
    max-width: 900px;
    margin: 0 auto;
    }
    main.update-log .flux{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--changelog-text, #1f1a17);
    margin: 0 0 48px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--changelog-primary);
    display: inline-block;
    }
    main.update-log .zenith{
    position: relative;
    padding-left: 40px;
    }
    main.update-log .zenith::before{
    content: "";
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 0;
    width: 2px;
    background: var(--changelog-border, #d9d5d1);
    }
    main.update-log .nebula{
    position: relative;
    margin-bottom: 56px;
    }
    main.update-log .nebula:last-child{
    margin-bottom: 0;
    }
    main.update-log .nebula::before{
    content: "";
    position: absolute;
    left: -40px;
    top: 8px;
    width: 16px;
    height: 16px;
    background: var(--changelog-surface, #fff);
    border: 3px solid var(--changelog-primary);
    border-radius: 0;
    }
    main.update-log .nebula.riddle::before{
    background: var(--changelog-primary);
    box-shadow: 0 0 0 4px hsla(15, 78%, 55%, 0.2);
    }
    main.update-log .thorn{
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    }
    main.update-log .ivory{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--changelog-text, #1f1a17);
    }
    main.update-log .yield{
    font-family: "Inter", sans-serif;
    font-size: 0.85rem;
    color: var(--changelog-muted, #7d7672);
    font-weight: 500;
    }
    main.update-log .delta{
    display: inline-block;
    padding: 3px 10px;
    background: var(--changelog-primary);
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    }
    main.update-log .jade{
    background: var(--changelog-surface, #fff);
    border: 1px solid var(--changelog-border, #d9d5d1);
    padding: 28px 32px;
    }
    main.update-log .epoch{
    margin-bottom: 24px;
    }
    main.update-log .epoch:last-child{
    margin-bottom: 0;
    }
    main.update-log .cascade{
    font-family: "Inter", sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    }
    main.update-log .cascade .glyph{
    display: inline-block;
    width: 8px;
    height: 8px;
    }
    main.update-log .aurora .glyph{ background: var(--changelog-tag-new); }
    main.update-log .aurora{ color: var(--changelog-tag-new); }
    main.update-log .nexus .glyph{ background: var(--changelog-tag-fix); }
    main.update-log .nexus{ color: var(--changelog-tag-fix); }
    main.update-log .husk .glyph{ background: var(--changelog-tag-perf); }
    main.update-log .husk{ color: var(--changelog-tag-perf); }
    main.update-log .helix .glyph{ background: var(--changelog-tag-security); }
    main.update-log .helix{ color: var(--changelog-tag-security); }
    main.update-log .ignite{
    list-style: none;
    margin: 0;
    padding: 0;
    }
    main.update-log .ignite li{
    font-family: "Inter", sans-serif;
    font-size: 0.92rem;
    color: var(--changelog-text, #1f1a17);
    line-height: 1.7;
    padding: 6px 0 6px 20px;
    position: relative;
    }
    main.update-log .ignite li::before{
    content: "—";
    position: absolute;
    left: 0;
    color: var(--changelog-muted, #7d7672);
    }
    main.update-log .onyx{
    margin: 48px 0;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--changelog-border, #d9d5d1);
    }
    main.update-log .onyx img{
    width: 100%;
    height: auto;
    display: block;
    }
    main.update-log .latch{
    font-family: "Inter", sans-serif;
    font-size: 0.82rem;
    color: var(--changelog-muted, #7d7672);
    text-align: center;
    padding: 12px 16px;
    background: var(--changelog-surface-alt, #e8e5e2);
    }
    main.update-log .changelog-nav-links{
    margin-top: 64px;
    padding: 32px;
    background: var(--changelog-surface, #fff);
    border: 1px solid var(--changelog-border, #d9d5d1);
    }
    main.update-log .changelog-nav-links h3{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--changelog-text, #1f1a17);
    margin: 0 0 16px;
    }
    main.update-log .changelog-nav-links p{
    font-family: "Inter", sans-serif;
    font-size: 0.92rem;
    color: var(--changelog-muted, #7d7672);
    line-height: 1.7;
    margin: 0;
    }
    main.update-log .changelog-nav-links a{
    color: var(--changelog-primary);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
    }
    main.update-log .changelog-nav-links a:hover{
    border-bottom-color: var(--changelog-primary);
    }
    main.update-log .haven{
    background: var(--changelog-dark, #1a1614);
    padding: 48px 24px;
    text-align: center;
    }
    main.update-log .fable{
    max-width: 900px;
    margin: 0 auto;
    }
    main.update-log .mythos{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: hsl(0, 0%, 90%);
    margin: 0 0 8px;
    }
    main.update-log .warp{
    font-family: "Inter", sans-serif;
    font-size: 0.82rem;
    color: hsl(15, 6%, 50%);
    margin: 0 0 24px;
    }
    main.update-log .changelog-footer-links{
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    }
    main.update-log .changelog-footer-links a{
    font-family: "Inter", sans-serif;
    font-size: 0.85rem;
    color: hsl(15, 6%, 60%);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.update-log .changelog-footer-links a:hover{
    color: var(--changelog-primary);
    }
    main.update-log .alchemy{
    font-family: "Inter", sans-serif;
    font-size: 0.78rem;
    color: hsl(15, 6%, 40%);
    margin: 0;
    padding-top: 24px;
    border-top: 1px solid hsla(0, 0%, 100%, 0.06);
    }
    @media (max-width: 768px) {main.update-log .cipher{
    padding: 72px 20px 56px;
    }
    main.update-log .quartz{
    padding: 48px 16px;
    }
    main.update-log .zenith{
    padding-left: 32px;
    }
    main.update-log .jade{
    padding: 20px 20px;
    }
    main.update-log .thorn{
    gap: 10px;
    }
    main.update-log .ivory{
    font-size: 1.15rem;
    }
    main.update-log .changelog-nav-links{
    padding: 24px 20px;
    }}
    @media (max-width: 480px) {main.update-log .zenith{
    padding-left: 24px;
    }
    main.update-log .nebula::before{
    left: -31px;
    width: 12px;
    height: 12px;
    }
    main.update-log .zenith::before{
    left: 5px;
    }
    main.update-log .bramble{
    flex-direction: column;
    align-items: center;
    }}

    body {
    padding-top: var(--nav-height);
    }
    
    .ember_drift {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    }
    
    .joltWave {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-width);
    height: 100%;
    margin: 0 auto;
    padding: 0 28px;
    }
    
    .mosaic {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    }
    .flicker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--primary-color), hsl(25, 85%, 60%));
    color: #1a1a2e;
    font-family: "Georgia", serif;
    font-size: 17px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    }
    .blotch {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.5px;
    }
    
    .lx5 {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .sable {
    position: relative;
    }
    .gn2p {
    display: block;
    padding: 8px 14px;
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    letter-spacing: 0.2px;
    }
    .gn2p:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.08);
    }
    
    .prism {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    background: linear-gradient(135deg, var(--primary-color), hsl(8, 75%, 50%));
    color: var(--btn-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 10px hsla(15, 78%, 55%, 0.35);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.3px;
    }
    .prism:hover {
    background: linear-gradient(135deg, hsl(15, 82%, 48%), hsl(8, 80%, 44%));
    box-shadow: 0 4px 18px hsla(15, 78%, 55%, 0.5);
    transform: translateY(-1px);
    }
    .prism:active {
    transform: translateY(0);
    box-shadow: 0 1px 6px hsla(15, 78%, 55%, 0.3);
    }
    .xr9 {
    font-size: 13px;
    line-height: 1;
    }
    .fathom {
    width: 100%;
    justify-content: center;
    padding: 14px 22px;
    font-size: 15px;
    }
    
    .dwq8 {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: 1px solid var(--nav-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    }
    .dwq8:hover {
    background: hsla(15, 10%, 80%, 0.08); color: #1a1a2e;}
    .tandem_hue {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 1px;
    transition: var(--transition);
    }
    
    .vortex {
    display: none;
    position: fixed;
    inset: 0;
    background: hsla(0, 0%, 0%, 0.55);
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.3s ease;
    }
    .vortex.is-active {
    display: block;
    opacity: 1;
    }
    
    .zephyr {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: hsl(20, 6%, 12%);
    border-left: 1px solid var(--nav-border);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-lg);
    }
    .zephyr.is-open {
    transform: translateX(0);
    }
    .pylon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: var(--nav-height);
    border-bottom: 1px solid var(--nav-border);
    flex-shrink: 0;
    }
    .rumble_fox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: 1px solid var(--nav-border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
    }
    .rumble_fox:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.08);
    }
    .cobalt {
    list-style: none;
    margin: 0;
    padding: 12px 0;
    flex: 1;
    overflow-y: auto;
    }
    .quirk {
    margin: 0;
    }
    .cragMist {
    display: block;
    padding: 14px 24px;
    font-size: 15px;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    border-left: 3px solid transparent;
    }
    .cragMist:hover {
    color: #1a1a2e;
    background: hsla(15, 10%, 80%, 0.06);
    border-left-color: var(--primary-color);
    }
    .kv3 {
    padding: 16px 20px 28px;
    border-top: 1px solid var(--nav-border);
    flex-shrink: 0;
    }
    
    @media (max-width: 960px) {.lx5 {
    display: none;
    }
    .prism:not(.nav-cta--full) {
    display: none;
    }
    .dwq8 {
    display: flex;
    }}

    .dwq8.is-active .tandem_hue:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    }
    .dwq8.is-active .tandem_hue:nth-child(2) {
    opacity: 0;
    }
    .dwq8.is-active .tandem_hue:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    }
    .gn2p.active {color: #1a1a2e; background: hsla(15, 10%, 80%, 0.08);}
    .cragMist.active {color: #1a1a2e; background: hsla(15, 10%, 80%, 0.06); border-left-color: var(--primary-color);}
    @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap");
    main.faq .abyss{
    position: relative;
    background: var(--faq-dark);
    color: #fff;
    padding: 100px 24px 80px;
    overflow: hidden;
    }
    main.faq .abyss::before{
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, hsla(15, 78%, 55%, 0.15) 0%, transparent 70%);
    pointer-events: none;
    }
    main.faq .abyss::after{
    content: "";
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, hsla(111, 62%, 55%, 0.1) 0%, transparent 70%);
    pointer-events: none; color: #1a1a2e;}
    main.faq .elm{
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    text-align: center;
    }
    main.faq .abyss h1{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 20px;
    letter-spacing: -0.02em;
    }
    main.faq .abyss h1 span{
    background: linear-gradient(135deg, var(--faq-primary), var(--faq-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    }
    main.faq .jewel{
    font-family: "Inter", sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: hsla(0, 0%, 100%, 0.7);
    max-width: 620px;
    margin: 0 auto 36px;
    }
    main.faq .opal{
    max-width: 540px;
    margin: 0 auto;
    position: relative;
    }
    main.faq .opal input{
    width: 100%;
    padding: 16px 56px 16px 20px;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    border: 1px solid hsla(0, 0%, 100%, 0.15);
    border-radius: 0;
    background: var(--faq-dark-surface);
    color: #fff;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    }
    main.faq .opal input::placeholder{
    color: hsla(0, 0%, 100%, 0.4);
    }
    main.faq .opal input:focus{
    border-color: var(--faq-primary);
    }
    main.faq .opal .dusk{
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: hsla(0, 0%, 100%, 0.4);
    }
    main.faq .blaze{
    background: var(--faq-bg, #f2f0ef);
    padding: 72px 24px;
    }
    main.faq .frost{
    max-width: 1100px;
    margin: 0 auto;
    }
    main.faq .mirage{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--faq-text, #1f1a17);
    margin: 0 0 12px;
    letter-spacing: -0.01em;
    }
    main.faq .nebula{
    font-family: "Inter", sans-serif;
    font-size: 0.95rem;
    color: var(--faq-text-muted);
    margin: 0 0 40px;
    line-height: 1.6;
    }
    main.faq .surge{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    }
    main.faq .phantom{
    background: var(--faq-surface, #fff);
    border: 1px solid var(--faq-border-light);
    padding: 28px 24px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    position: relative;
    overflow: hidden;
    }
    main.faq .phantom::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--faq-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s;
    }
    main.faq .phantom:hover::before{
    transform: scaleX(1);
    }
    main.faq .phantom:hover{
    transform: translateY(-2px);
    box-shadow: var(--faq-shadow-md);
    border-color: var(--faq-border);
    }
    main.faq .knot{
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(15, 78%, 55%, 0.08);
    margin-bottom: 16px;
    font-size: 1.3rem;
    }
    main.faq .phantom h3{
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--faq-text, #1f1a17);
    margin: 0 0 8px;
    }
    main.faq .phantom p{
    font-family: "Inter", sans-serif;
    font-size: 0.85rem;
    color: var(--faq-text-muted);
    line-height: 1.55;
    margin: 0;
    }
    main.faq .zinc{
    background: var(--faq-surface, #fff);
    padding: 72px 24px;
    }
    main.faq .loom{
    max-width: 860px;
    margin: 0 auto;
    }
    main.faq .tide{
    margin-bottom: 56px;
    }
    main.faq .tide:last-child{
    margin-bottom: 0;
    }
    main.faq .falcon{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--faq-text, #1f1a17);
    margin: 0 0 8px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--faq-dark);
    display: flex;
    align-items: center;
    gap: 10px;
    }
    main.faq .falcon .ember{
    width: 6px;
    height: 24px;
    background: var(--faq-primary);
    display: inline-block;
    flex-shrink: 0;
    }
    main.faq .drift{
    border-bottom: 1px solid var(--faq-border-light);
    }
    main.faq .raven{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    cursor: pointer;
    gap: 16px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: "Inter", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--faq-text, #1f1a17);
    line-height: 1.5;
    transition: color 0.2s;
    }
    main.faq .raven:hover{
    color: var(--faq-primary);
    }
    main.faq .crest{
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--faq-border);
    transition: transform 0.3s, border-color 0.3s, background 0.3s;
    font-size: 1.1rem;
    color: var(--faq-text-muted);
    line-height: 1;
    }
    main.faq .drift.kindle .crest{
    transform: rotate(45deg);
    border-color: var(--faq-primary);
    background: var(--faq-primary);
    color: #fff;
    }
    main.faq .quarry{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    }
    main.faq .drift.kindle .quarry{
    max-height: 600px;
    padding-bottom: 20px;
    }
    main.faq .apex{
    font-family: "Inter", sans-serif;
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--faq-text-muted);
    padding-left: 0;
    }
    main.faq .apex ol, main.faq .apex ul{
    padding-left: 20px;
    margin: 8px 0;
    }
    main.faq .apex li{
    margin-bottom: 4px;
    }
    main.faq .apex a{
    color: var(--faq-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s;
    }
    main.faq .apex a:hover{
    color: var(--faq-primary-dark);
    }
    main.faq .apex code{
    background: var(--faq-surface-alt);
    padding: 2px 6px;
    font-size: 0.85em;
    font-family: "Courier New", monospace;
    }
    main.faq .faq-visual-banner{
    position: relative;
    background: var(--faq-dark);
    padding: 0;
    overflow: hidden;
    min-height: 320px;
    display: flex;
    align-items: center;
    }
    main.faq .faq-visual-banner img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.25;
    }
    main.faq .faq-visual-banner-content{
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    padding: 64px 24px;
    text-align: center;
    color: #fff;
    }
    main.faq .faq-visual-banner-content h2{
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    margin: 0 0 16px;
    }
    main.faq .faq-visual-banner-content p{
    font-family: "Inter", sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: hsla(0, 0%, 100%, 0.7);
    margin: 0 0 28px;
    }
    main.faq .faq-cta-btn{
    display: inline-block;
    padding: 14px 36px;
    font-family: "Inter", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--faq-primary), var(--faq-primary-dark));
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 16px hsla(15, 78%, 55%, 0.35);
    }
    main.faq .faq-cta-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 6px 24px hsla(15, 78%, 55%, 0.45);
    }
    main.faq .faq-contact-section{
    background: var(--faq-bg, #f2f0ef);
    padding: 72px 24px;
    }
    main.faq .faq-contact-inner{
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    }
    main.faq .faq-contact-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
    }
    main.faq .faq-contact-card{
    background: var(--faq-surface, #fff);
    border: 1px solid var(--faq-border-light);
    padding: 32px 24px;
    transition: box-shadow 0.2s;
    }
    main.faq .faq-contact-card:hover{
    box-shadow: var(--faq-shadow-md);
    }
    main.faq .faq-contact-card-icon{
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--faq-dark);
    color: #fff;
    font-size: 1.2rem;
    }
    main.faq .faq-contact-card h3{
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--faq-text, #1f1a17);
    margin: 0 0 8px;
    }
    main.faq .faq-contact-card p{
    font-family: "Inter", sans-serif;
    font-size: 0.85rem;
    color: var(--faq-text-muted);
    line-height: 1.6;
    margin: 0;
    }
    main.faq .faq-quick-links{
    background: var(--faq-surface, #fff);
    padding: 56px 24px;
    border-top: 1px solid var(--faq-border-light);
    }
    main.faq .faq-quick-links-inner{
    max-width: 900px;
    margin: 0 auto;
    }
    main.faq .faq-quick-links h2{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--faq-text, #1f1a17);
    margin: 0 0 24px;
    }
    main.faq .faq-links-row{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    }
    main.faq .faq-link-chip{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    font-family: "Inter", sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--faq-text, #1f1a17);
    background: var(--faq-surface-alt);
    border: 1px solid var(--faq-border-light);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    main.faq .faq-link-chip:hover{
    background: var(--faq-dark);
    color: #fff;
    border-color: var(--faq-dark);
    }
    main.faq .faq-link-chip svg{
    width: 14px;
    height: 14px;
    }
    main.faq .lantern{
    background: var(--faq-dark);
    color: hsla(0, 0%, 100%, 0.5);
    padding: 48px 24px;
    }
    main.faq .xenon{
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    }
    main.faq .nomad{
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    }
    main.faq .nomad span{
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    color: hsla(0, 0%, 100%, 0.4);
    margin-top: 4px;
    }
    main.faq .flint{
    display: flex;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    main.faq .flint a{
    font-family: "Inter", sans-serif;
    font-size: 0.82rem;
    color: hsla(0, 0%, 100%, 0.5);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.faq .flint a:hover{
    color: #fff;
    }
    main.faq .faq-footer-copy{
    font-family: "Inter", sans-serif;
    font-size: 0.8rem;
    color: hsla(0, 0%, 100%, 0.35);
    }
    @media (max-width: 900px) {main.faq .surge{
    grid-template-columns: repeat(2, 1fr);
    }
    main.faq .faq-contact-grid{
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    }}
    @media (max-width: 600px) {main.faq .abyss{
    padding: 72px 16px 56px;
    }
    main.faq .surge{
    grid-template-columns: 1fr;
    }
    main.faq .blaze, main.faq .zinc, main.faq .faq-contact-section, main.faq .faq-quick-links{
    padding: 48px 16px;
    }
    main.faq .xenon{
    flex-direction: column;
    text-align: center;
    }
    main.faq .flint{
    justify-content: center;
    }
    main.faq .faq-links-row{
    justify-content: center;
    }}
    main.faq .lantern{
    background: linear-gradient(180deg, var(--bg-color, #1a1a1a) 0%, hsl(20, 8%, 7%) 100%);
    border-top: 1px solid var(--border-color, hsla(15, 10%, 80%, 0.1));
    padding: 48px 24px 32px;
    margin-top: 80px;
    }
    main.faq .xenon{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 36px;
    }
    main.faq .yonder{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    }
    main.faq .nomad{
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    }
    main.faq .quartz{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color, #e0d8d4);
    letter-spacing: 0.02em;
    }
    main.faq .whisper{
    font-size: 13px;
    color: var(--text-muted, hsl(15, 6%, 56%));
    margin: 0;
    letter-spacing: 0.03em;
    }
    main.faq .flint{
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    }
    main.faq .cedar{
    color: var(--text-muted, hsl(15, 6%, 56%));
    text-decoration: none;
    font-size: 14px;
    padding: 6px 16px;
    transition: var(--transition, all 0.25s ease);
    letter-spacing: 0.01em;
    }
    main.faq .cedar:hover{
    color: var(--primary-color, hsl(15, 78%, 55%));
    }
    main.faq .vivid{
    width: 1px;
    height: 14px;
    background: var(--border-color, hsla(15, 10%, 80%, 0.1));
    flex: 0 0 1px;
    }
    main.faq .hollow{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid var(--border-color, hsla(15, 10%, 80%, 0.1));
    flex-wrap: wrap;
    gap: 16px;
    }
    main.faq .glacier{
    font-size: 13px;
    color: var(--text-muted, hsl(15, 6%, 56%));
    margin: 0;
    flex: 1 1 auto;
    }
    main.faq .ripple{
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    }
    main.faq .marsh{
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, hsl(15, 6%, 56%));
    border: 1px solid var(--border-color, hsla(15, 10%, 80%, 0.1));
    border-radius: var(--radius-sm, 3px);
    transition: var(--transition, all 0.25s ease);
    text-decoration: none;
    }
    main.faq .marsh:hover{
    color: var(--primary-color, hsl(15, 78%, 55%));
    border-color: var(--primary-color, hsl(15, 78%, 55%));
    background: hsla(15, 78%, 55%, 0.08);
    }
    @media (max-width: 640px) {main.faq .lantern{
    padding: 36px 16px 24px;
    margin-top: 48px;
    }
    main.faq .yonder{
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    }
    main.faq .flint{
    flex-wrap: wrap;
    gap: 4px;
    }
    main.faq .cedar{
    padding: 6px 12px 6px 0;
    }
    main.faq .vivid{
    display: none;
    }
    main.faq .hollow{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    }}

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