:root {
  --primary-color: hsl(47, 70%, 50%);
  --secondary-color: hsl(117, 56%, 42%);
  --bg-color: hsl(47, 7%, 95%);
  --text-color: hsl(47, 10%, 12%);
  --text-muted: hsl(47, 6%, 44%);
  --border-color: rgba(0, 0, 0, 0.1);
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.14);
  --nav-height: 56px;
  --max-width: 1200px;
  --transition: all 0.2s ease;
  --nav-bg: var(--text-color);
  --nav-text: var(--bg-color);
  --nav-text-muted: hsl(47, 7%, 68%);
  --page-gold: hsl(47, 70%, 57%);
  --page-green: hsl(117, 56%, 57%);
  --page-dark: hsl(47, 10%, 12%);
  --page-light: hsl(47, 7%, 95%);
  --page-mid: hsl(47, 5%, 40%);
  --page-border: hsl(47, 5%, 82%);

  --page-gold-dark: hsl(47, 70%, 42%);
  --page-serif: "Noto Serif SC", Georgia, serif;
  --page-sans: "Noto Sans SC", system-ui, sans-serif;
  --page-primary: hsl(47, 70%, 57%);
  --page-primary-dark: hsl(47, 70%, 42%);
  --page-secondary: hsl(117, 56%, 57%);
  --page-secondary-dark: hsl(117, 56%, 40%);
  --page-text: hsl(47, 10%, 12%);
  --page-bg: hsl(47, 7%, 95%);
  --page-surface-alt: hsl(47, 5%, 90%);
  --page-muted: hsl(47, 5%, 45%);
  --feat-primary: hsl(47, 70%, 57%);
  --feat-primary-dark: hsl(47, 70%, 42%);
  --feat-secondary: hsl(117, 56%, 57%);
  --feat-secondary-dark: hsl(117, 56%, 40%);
  --feat-text: hsl(47, 10%, 12%);
  --feat-text-muted: hsl(47, 8%, 40%);
  --feat-bg: hsl(47, 7%, 95%);
  --feat-bg-dark: hsl(47, 5%, 8%);
  --feat-bg-card: hsl(47, 5%, 100%);
  --feat-border: hsl(47, 8%, 85%);
  --feat-serif: "Noto Serif SC", "Georgia", serif;
  --feat-sans: "Noto Sans SC", "Helvetica Neue", sans-serif;
  --ext-primary: hsl(47, 70%, 57%);
  --ext-primary-dark: hsl(47, 70%, 42%);
  --ext-secondary: hsl(117, 56%, 57%);
  --ext-secondary-dark: hsl(117, 56%, 40%);
  --ext-bg: hsl(47, 7%, 95%);
  --ext-surface: hsl(47, 5%, 100%);
  --ext-surface-alt: hsl(47, 5%, 91%);
  --ext-text: hsl(47, 10%, 12%);
  --ext-text-secondary: hsl(47, 6%, 40%);
  --ext-border: hsl(47, 8%, 85%);
  --ext-dark: hsl(47, 10%, 8%);
  --ext-dark-surface: hsl(47, 8%, 14%);
  --ext-code-bg: hsl(47, 5%, 97%);
  --guide-primary: hsl(47, 70%, 57%);
  --guide-primary-dark: hsl(47, 70%, 42%);
  --guide-secondary: hsl(117, 56%, 57%);
  --guide-secondary-dark: hsl(117, 56%, 40%);
  --guide-text: hsl(47, 10%, 12%);
  --guide-text-muted: hsl(47, 8%, 40%);
  --guide-bg: hsl(47, 7%, 95%);
  --guide-surface: hsl(47, 7%, 100%);
  --guide-surface-alt: hsl(47, 5%, 91%);
  --guide-border: hsl(47, 8%, 82%);
  --guide-dark: hsl(47, 10%, 8%);
  --guide-serif: "Noto Serif SC", Georgia, serif;
  --guide-sans: "Noto Sans SC", system-ui, sans-serif;
  --tips-primary: hsl(47, 70%, 57%);
  --tips-primary-dark: hsl(47, 70%, 42%);
  --tips-accent: hsl(117, 56%, 57%);
  --tips-accent-dark: hsl(117, 56%, 40%);
  --tips-text: hsl(47, 10%, 12%);
  --tips-text-muted: hsl(47, 8%, 40%);
  --tips-bg: hsl(47, 7%, 95%);
  --tips-surface: hsl(47, 7%, 100%);
  --tips-surface-alt: hsl(47, 5%, 91%);
  --tips-border: hsl(47, 8%, 82%);
  --tips-dark: hsl(47, 10%, 8%);
  --tips-code-bg: hsl(47, 5%, 14%);
}

*,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .crumble {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .duskMeld {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    gap: 32px;
    }
    
    .juniper {
    flex-shrink: 0;
    }
    .blotch {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--nav-text);
    }
    .lignite {
    color: var(--primary-color);
    }
    .galvanic {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: inherit;
    }
    
    .ember {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 4px;
    flex: 1;
    justify-content: center;
    }
    .myrrh {
    position: relative;
    }
    .gnaw {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 400;
    color: var(--nav-text-muted);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: var(--transition);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    }
    .gnaw:hover,
    .gnaw:focus-visible {
    color: var(--nav-text);
    }
    .orc {
    cursor: default;
    }
    .quilted {
    transition: transform 0.2s ease;
    opacity: 0.5;
    }
    
    .quasar {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    background: var(--nav-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-lg);
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    }
    .zephyr:hover .quasar,
    .zephyr:focus-within .quasar {
    opacity: 1;
    visibility: visible;
    }
    .zephyr:hover .quilted {
    transform: rotate(180deg);
    }
    .vortex3 {
    display: block;
    padding: 9px 20px;
    font-size: 13px;
    color: var(--nav-text-muted);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .vortex3:hover {
    color: var(--nav-text);
    background: rgba(255, 255, 255, 0.04);
    }
    
    .pixel_hum {
    flex-shrink: 0;
    }
    .dawnLit {
    display: inline-block;
    padding: 8px 22px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--text-color);
    background: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .dawnLit:hover {
    background: hsl(47, 70%, 44%);
    }
    .dawnLit:active {
    transform: scale(0.97);
    }
    
    .fizzPop {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    }
    .prong {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--nav-text);
    transition: var(--transition);
    }
    
    .sluice {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001; color: #ffffff;}
    .kv9 {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: var(--nav-bg);
    z-index: 1002;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    }
    .woven {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--nav-text);
    }
    .riptide {
    background: none;
    border: none;
    color: var(--nav-text);
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    }
    .ratchet {
    list-style: none;
    padding: 12px 0;
    }
    .tremolo {
    display: block;
    padding: 12px 24px;
    font-size: 14px;
    color: var(--nav-text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .tremolo:hover {
    color: var(--nav-text);
    }
    .saxo {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 12px 24px;
    font-size: 14px;
    font-family: inherit;
    color: var(--nav-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
    }
    .saxo:hover {
    color: var(--nav-text);
    }
    .fog_ray {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    }
    .bevel.is-open .fog_ray {
    max-height: 300px;
    }
    .bevel.is-open .quilted {
    transform: rotate(180deg);
    }
    .fog_ray .tremolo {
    padding-left: 40px;
    font-size: 13px;
    }
    .cobalt_fin {
    padding: 16px 20px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    .cask7 {
    display: block;
    text-align: center;
    width: 100%;
    }
    
    .nav-mobile-open .sluice {
    display: block;
    }
    .nav-mobile-open .kv9 {
    display: flex;
    transform: translateX(0);
    }
    
    @media (max-width: 860px) {.ember,
    .pixel_hum {
    display: none;
    }
    .fizzPop {
    display: flex;
    }}
    @media (min-width: 861px) {.sluice,
    .kv9 {
    display: none !important;
    }}
    .vortex3.active {color: var(--nav-text); background: rgba(255, 255, 255, 0.04);}
    .gnaw.active {color: var(--primary-color, #7c3aed); background: var(--border-color, rgba(0,0,0,0.08)); border-radius: var(--radius-sm, 8px);}
    .tremolo.active {color: var(--nav-text);}
    @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(--page-sans);
    color: var(--page-dark);
    background: var(--page-light);
    overflow-x: hidden;
    }
    
    main.index .rivulet{
    background: var(--page-dark);
    color: #fff;
    padding: 100px 24px 80px;
    position: relative;
    overflow: hidden;
    }
    main.index .rivulet::after{
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, hsla(47, 70%, 57%, .12) 0%, transparent 70%);
    pointer-events: none;
    }
    main.index .talc{
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
    }
    main.index .plinth h1{
    font-family: var(--page-serif);
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    }
    main.index .plinth h1 span{
    color: var(--page-gold);
    }
    main.index .dross4{
    font-size: 1.125rem;
    color: hsla(0, 0%, 100%, .7);
    line-height: 1.7;
    margin-bottom: 36px;
    max-width: 480px;
    }
    main.index .dapple{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    }
    main.index .cleft{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--page-gold);
    color: var(--page-dark);
    font-weight: 700;
    font-size: 1rem;
    padding: 14px 32px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, transform .15s;
    }
    main.index .cleft:hover{
    background: var(--page-gold-dark);
    transform: translateY(-1px);
    }
    main.index .cleft svg{
    width: 18px;
    height: 18px;
    fill: currentColor;
    }
    main.index .foldRune{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    padding: 14px 28px;
    border: 2px solid hsla(0, 0%, 100%, .25);
    cursor: pointer;
    text-decoration: none;
    transition: border-color .2s, background .2s;
    }
    main.index .foldRune:hover{
    border-color: var(--page-gold);
    background: hsla(47, 70%, 57%, .08);
    }
    main.index .gust9{
    position: relative;
    }
    main.index .gust9 img{
    width: 100%;
    height: auto;
    display: block;
    filter: brightness(.95) contrast(1.05);
    }
    main.index .cruxVine{
    position: absolute;
    bottom: -16px;
    left: 24px;
    background: var(--page-surface);
    border: 1px solid hsla(47, 70%, 57%, .2);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    }
    main.index .zenith{
    width: 8px;
    height: 8px;
    background: var(--page-green);
    display: inline-block;
    }
    main.index .cruxVine span{
    font-size: .85rem;
    color: hsla(0, 0%, 100%, .8);
    }
    main.index .cruxVine strong{
    color: #fff;
    }
    
    main.index .fluxOrb{
    background: #fff;
    border-bottom: 1px solid var(--page-border);
    padding: 40px 24px;
    }
    main.index .verdigris{
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    }
    main.index .whimsy{
    text-align: center;
    padding: 0 12px;
    }
    main.index .pewter{
    font-family: var(--page-serif);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 900;
    color: var(--page-dark);
    line-height: 1;
    margin-bottom: 6px;
    }
    main.index .jarKin{
    font-size: .875rem;
    color: var(--page-mid);
    }
    
    main.index .kelp{
    padding: 80px 24px;
    max-width: 1120px;
    margin: 0 auto;
    }
    main.index .grotto{
    margin-bottom: 56px;
    }
    main.index .grotto h2{
    font-family: var(--page-serif);
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 900;
    color: var(--page-dark);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    }
    main.index .grotto p{
    font-size: 1.05rem;
    color: var(--page-mid);
    max-width: 560px;
    line-height: 1.7;
    }
    main.index .nib{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--page-border);
    }
    main.index .anvil{
    background: #fff;
    padding: 40px 32px;
    transition: background .2s;
    }
    main.index .anvil:hover{
    background: hsl(47, 10%, 98%);
    }
    main.index .helium{
    width: 40px;
    height: 40px;
    background: var(--page-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    }
    main.index .helium svg{
    width: 20px;
    height: 20px;
    fill: var(--page-gold);
    }
    main.index .anvil h3{
    font-family: var(--page-serif);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--page-dark);
    }
    main.index .anvil p{
    font-size: .9rem;
    color: var(--page-mid);
    line-height: 1.65;
    }
    
    main.index .snag_bolt{
    background: var(--page-dark);
    color: #fff;
    padding: 80px 24px;
    }
    main.index .tundra{
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    }
    main.index .pumice h2{
    font-family: var(--page-serif);
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 900;
    margin-bottom: 20px;
    }
    main.index .pumice p{
    font-size: 1rem;
    color: hsla(0, 0%, 100%, .65);
    line-height: 1.75;
    margin-bottom: 16px;
    }
    main.index .ingot{
    list-style: none;
    margin: 24px 0 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    }
    main.index .ingot li{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: .95rem;
    color: hsla(0, 0%, 100%, .8);
    line-height: 1.5;
    }
    main.index .ingot li::before{
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    background: var(--page-gold);
    margin-top: 7px;
    }
    main.index .waspNest{
    position: relative;
    }
    main.index .waspNest img{
    width: 100%;
    height: auto;
    display: block;
    }
    
    main.index .yawnKit{
    padding: 80px 24px;
    max-width: 1120px;
    margin: 0 auto;
    }
    main.index .fretwork{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: var(--page-border);
    }
    main.index .barb{
    background: #fff;
    padding: 40px 28px;
    text-align: center;
    transition: background .2s;
    }
    main.index .barb:hover{
    background: hsl(47, 10%, 98%);
    }
    main.index .nubLatch{
    font-size: 2rem;
    margin-bottom: 16px;
    display: block;
    }
    main.index .barb h3{
    font-family: var(--page-serif);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--page-dark);
    }
    main.index .barb p{
    font-size: .85rem;
    color: var(--page-mid);
    line-height: 1.6;
    margin-bottom: 20px;
    }
    main.index .crypt8{
    display: inline-block;
    background: var(--page-dark);
    color: #fff;
    font-weight: 600;
    font-size: .85rem;
    padding: 10px 24px;
    text-decoration: none;
    transition: background .2s;
    }
    main.index .crypt8:hover{
    background: var(--page-surface);
    }
    
    main.index .quill_fox{
    background: hsl(47, 8%, 92%);
    padding: 80px 24px;
    }
    main.index .loom{
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    }
    main.index .mantis img{
    width: 100%;
    height: auto;
    display: block;
    }
    main.index .jolt_web h2{
    font-family: var(--page-serif);
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 900;
    color: var(--page-dark);
    margin-bottom: 20px;
    }
    main.index .jolt_web p{
    font-size: 1rem;
    color: var(--page-mid);
    line-height: 1.75;
    margin-bottom: 16px;
    }
    main.index .strewn{
    margin: 24px 0 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    }
    main.index .spore_den{
    display: flex;
    gap: 16px;
    align-items: flex-start;
    }
    main.index .latch5{
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--page-dark);
    color: var(--page-gold);
    font-family: var(--page-serif);
    font-weight: 900;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    main.index .basalt h3{
    font-size: .95rem;
    font-weight: 700;
    color: var(--page-dark);
    margin-bottom: 2px;
    }
    main.index .basalt p{
    font-size: .85rem;
    margin-bottom: 0;
    }
    
    main.index .cta{
    background: var(--page-dark);
    color: #fff;
    padding: 80px 24px;
    text-align: center;
    }
    main.index .cta h2{
    font-family: var(--page-serif);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 900;
    margin-bottom: 16px;
    }
    main.index .cta p{
    font-size: 1.05rem;
    color: hsla(0, 0%, 100%, .6);
    margin-bottom: 36px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
    }
    main.index .cta .cleft{
    font-size: 1.1rem;
    padding: 16px 40px;
    }
    main.index .cta-version{
    margin-top: 16px;
    font-size: .8rem;
    color: hsla(0, 0%, 100%, .35);
    }
    
    main.index .page-footer{
    background: hsl(47, 10%, 10%);
    color: hsla(0, 0%, 100%, .45);
    padding: 40px 24px;
    }
    main.index .cumin{
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    }
    main.index .mortar_vex{
    font-family: var(--page-serif);
    font-weight: 700;
    font-size: 1rem;
    color: hsla(0, 0%, 100%, .7);
    }
    main.index .spurGem{
    display: flex;
    gap: 24px;
    list-style: none;
    }
    main.index .spurGem a{
    color: hsla(0, 0%, 100%, .45);
    text-decoration: none;
    font-size: .85rem;
    transition: color .2s;
    }
    main.index .spurGem a:hover{
    color: var(--page-gold);
    }
    main.index .footer-copy{
    font-size: .8rem;
    width: 100%;
    text-align: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid hsla(0, 0%, 100%, .08);
    }
    
    @media (max-width: 900px) {main.index .talc, main.index .tundra, main.index .loom{
    grid-template-columns: 1fr;
    gap: 40px;
    }
    main.index .loom{
    direction: ltr;
    }
    main.index .mantis{ order: -1; }
    main.index .verdigris{
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    }
    main.index .nib{
    grid-template-columns: 1fr;
    }
    main.index .fretwork{
    grid-template-columns: repeat(2, 1fr);
    }}
    @media (max-width: 540px) {main.index .rivulet{ padding: 72px 16px 56px; }
    main.index .verdigris{
    grid-template-columns: 1fr 1fr;
    }
    main.index .fretwork{
    grid-template-columns: 1fr;
    }
    main.index .dapple{
    flex-direction: column;
    }
    main.index .cleft, main.index .foldRune{
    justify-content: center;
    width: 100%;
    }
    main.index .cumin{
    flex-direction: column;
    text-align: center;
    }
    main.index .spurGem{
    justify-content: center;
    }}
    main.index .brackFog{
    background-color: var(--text-color, #1c1a14);
    color: var(--bg-color, #f2f1ee);
    padding: 64px 24px 32px;
    font-family: Georgia, "Times New Roman", serif;
    }
    main.index .cumin{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    width: 100%;
    }
    main.index .crankMop{
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
    }
    main.index .mortar_vex{
    flex: 1 1 280px;
    min-width: 200px;
    }
    main.index .oxide{
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 0 12px;
    color: var(--primary-color, hsl(47, 70%, 50%));
    }
    main.index .husk{
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    color: hsl(47, 6%, 62%);
    max-width: 260px;
    }
    main.index .floe{
    flex: 0 0 160px;
    }
    main.index .sable{
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 16px;
    color: hsl(47, 6%, 72%);
    }
    main.index .spurGem{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }
    main.index .magpie{
    line-height: 1;
    }
    main.index .glintSaw{
    font-size: 14px;
    color: hsl(47, 6%, 55%);
    text-decoration: none;
    transition: var(--transition, all 0.2s ease);
    line-height: 1.5;
    }
    main.index .glintSaw:hover{
    color: var(--primary-color, hsl(47, 70%, 50%));
    }
    main.index .pang{
    height: 1px;
    background: hsl(47, 4%, 24%);
    margin: 48px 0 24px; color: #ffffff;}
    main.index .opsin{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    }
    main.index .pyre{
    font-size: 13px;
    color: hsl(47, 4%, 44%);
    margin: 0;
    flex: 0 0 auto;
    }
    main.index .dhole{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    }
    main.index .torque_ash{
    font-size: 13px;
    color: hsl(47, 4%, 44%);
    text-decoration: none;
    transition: var(--transition, all 0.2s ease);
    }
    main.index .torque_ash:hover{
    color: var(--primary-color, hsl(47, 70%, 50%));
    }
    main.index .cairn{
    color: hsl(47, 4%, 30%);
    font-size: 13px;
    user-select: none;
    }
    @media (max-width: 768px) {main.index .brackFog{
    padding: 48px 20px 28px;
    }
    main.index .crankMop{
    gap: 36px;
    }
    main.index .mortar_vex{
    flex: 1 1 100%;
    }
    main.index .floe{
    flex: 1 1 140px;
    }
    main.index .opsin{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .crumble {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .duskMeld {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    gap: 32px;
    }
    
    .juniper {
    flex-shrink: 0;
    }
    .blotch {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--nav-text);
    }
    .lignite {
    color: var(--primary-color);
    }
    .galvanic {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: inherit;
    }
    
    .ember {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 4px;
    flex: 1;
    justify-content: center;
    }
    .myrrh {
    position: relative;
    }
    .gnaw {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 400;
    color: var(--nav-text-muted);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: var(--transition);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    }
    .gnaw:hover,
    .gnaw:focus-visible {
    color: var(--nav-text);
    }
    .orc {
    cursor: default;
    }
    .quilted {
    transition: transform 0.2s ease;
    opacity: 0.5;
    }
    
    .quasar {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    background: var(--nav-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-lg);
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    }
    .zephyr:hover .quasar,
    .zephyr:focus-within .quasar {
    opacity: 1;
    visibility: visible;
    }
    .zephyr:hover .quilted {
    transform: rotate(180deg);
    }
    .vortex3 {
    display: block;
    padding: 9px 20px;
    font-size: 13px;
    color: var(--nav-text-muted);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .vortex3:hover {
    color: var(--nav-text);
    background: rgba(255, 255, 255, 0.04);
    }
    
    .pixel_hum {
    flex-shrink: 0;
    }
    .dawnLit {
    display: inline-block;
    padding: 8px 22px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--text-color);
    background: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .dawnLit:hover {
    background: hsl(47, 70%, 44%);
    }
    .dawnLit:active {
    transform: scale(0.97);
    }
    
    .fizzPop {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    }
    .prong {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--nav-text);
    transition: var(--transition);
    }
    
    .sluice {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001; color: #ffffff;}
    .kv9 {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: var(--nav-bg);
    z-index: 1002;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    }
    .woven {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--nav-text);
    }
    .riptide {
    background: none;
    border: none;
    color: var(--nav-text);
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    }
    .ratchet {
    list-style: none;
    padding: 12px 0;
    }
    .tremolo {
    display: block;
    padding: 12px 24px;
    font-size: 14px;
    color: var(--nav-text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .tremolo:hover {
    color: var(--nav-text);
    }
    .saxo {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 12px 24px;
    font-size: 14px;
    font-family: inherit;
    color: var(--nav-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
    }
    .saxo:hover {
    color: var(--nav-text);
    }
    .fog_ray {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    }
    .bevel.is-open .fog_ray {
    max-height: 300px;
    }
    .bevel.is-open .quilted {
    transform: rotate(180deg);
    }
    .fog_ray .tremolo {
    padding-left: 40px;
    font-size: 13px;
    }
    .cobalt_fin {
    padding: 16px 20px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    .cask7 {
    display: block;
    text-align: center;
    width: 100%;
    }
    
    .nav-mobile-open .sluice {
    display: block;
    }
    .nav-mobile-open .kv9 {
    display: flex;
    transform: translateX(0);
    }
    
    @media (max-width: 860px) {.ember,
    .pixel_hum {
    display: none;
    }
    .fizzPop {
    display: flex;
    }}
    @media (min-width: 861px) {.sluice,
    .kv9 {
    display: none !important;
    }}
    .vortex3.active {color: var(--nav-text); background: rgba(255, 255, 255, 0.04);}
    .gnaw.active {color: var(--primary-color, #7c3aed); background: var(--border-color, rgba(0,0,0,0.08)); border-radius: var(--radius-sm, 8px);}
    .tremolo.active {color: var(--nav-text);}
    main.download *{ box-sizing: border-box; margin: 0; padding: 0; }
    main.download .bramble{
    background: var(--page-text);
    color: var(--page-bg);
    padding: 80px 24px 64px;
    text-align: center;
    }
    main.download .vetch{
    max-width: 720px;
    margin: 0 auto;
    }
    main.download .bramble h1{
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 16px;
    }
    main.download .zinc3{
    font-size: 1.05rem;
    line-height: 1.6;
    color: hsl(47, 5%, 70%);
    margin-bottom: 40px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    }
    main.download .vale{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: hsl(47, 5%, 55%);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 32px;
    }
    main.download .vale span{
    width: 6px;
    height: 6px;
    background: var(--page-secondary);
    display: inline-block;
    }
    main.download .rusk{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--page-primary);
    color: var(--page-text);
    font-size: 1.05rem;
    font-weight: 700;
    padding: 16px 48px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: background 0.2s;
    }
    main.download .rusk:hover{
    background: var(--page-primary-dark);
    }
    main.download .rusk svg{
    width: 18px;
    height: 18px;
    fill: currentColor;
    }
    main.download .glyph{
    font-size: 0.78rem;
    color: hsl(47, 5%, 50%);
    margin-top: 16px;
    }
    main.download .molt{
    background: var(--page-bg);
    padding: 72px 24px;
    }
    main.download .urn_gale{
    max-width: 960px;
    margin: 0 auto;
    }
    main.download .molt h2{
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 700;
    color: var(--page-text);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    }
    main.download .dreg{
    color: var(--page-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 48px;
    max-width: 520px;
    }
    main.download .quorum{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--page-border);
    border: 1px solid var(--page-border);
    }
    main.download .hasp{
    background: var(--page-surface);
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    }
    main.download .jib_knot{
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    main.download .jib_knot svg{
    width: 32px;
    height: 32px;
    fill: var(--page-text);
    }
    main.download .hasp h3{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--page-text);
    margin-bottom: 8px;
    }
    main.download .siltVane{
    font-size: 0.78rem;
    color: var(--page-muted);
    margin-bottom: 16px;
    line-height: 1.5;
    }
    main.download .yoke{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: auto;
    padding: 10px 20px;
    background: var(--page-text);
    color: var(--page-bg);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
    }
    main.download .yoke:hover{
    opacity: 0.85;
    }
    main.download .wraith{
    background: var(--page-text);
    color: var(--page-bg);
    padding: 72px 24px;
    }
    main.download .thaw{
    max-width: 960px;
    margin: 0 auto;
    }
    main.download .wraith h2{
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 700;
    margin-bottom: 48px;
    letter-spacing: -0.01em;
    }
    main.download .xylol{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: hsl(47, 5%, 25%);
    border: 1px solid hsl(47, 5%, 25%); color: #ffffff;}
    main.download .scrim{
    background: var(--page-text);
    padding: 36px 28px;
    }
    main.download .frond{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--page-primary);
    line-height: 1;
    margin-bottom: 16px;
    }
    main.download .scrim h3{
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--page-bg);
    }
    main.download .scrim p{
    font-size: 0.85rem;
    line-height: 1.6;
    color: hsl(47, 5%, 60%);
    }
    main.download .lapis{
    background: var(--page-bg);
    padding: 0 24px;
    }
    main.download .whelk{
    max-width: 960px;
    margin: 0 auto;
    border: 1px solid var(--page-border);
    }
    main.download .whelk img{
    width: 100%;
    height: auto;
    display: block;
    }
    main.download .yurt{
    background: var(--page-bg);
    padding: 72px 24px;
    }
    main.download .quag{
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--page-border);
    border: 1px solid var(--page-border);
    }
    main.download .kudzu{
    background: var(--page-surface);
    padding: 36px 28px;
    }
    main.download .kudzu h2{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--page-text);
    margin-bottom: 20px;
    letter-spacing: -0.01em;
    }
    main.download .kudzu h3{
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--page-text);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    }
    main.download .umber{
    list-style: none;
    padding: 0;
    }
    main.download .umber li{
    font-size: 0.88rem;
    color: var(--page-muted);
    padding: 8px 0;
    border-bottom: 1px solid var(--page-surface-alt);
    line-height: 1.5;
    }
    main.download .umber li:last-child{
    border-bottom: none;
    }
    main.download .xeric{
    background: var(--page-surface);
    border-top: 1px solid var(--page-border);
    border-bottom: 1px solid var(--page-border);
    padding: 56px 24px;
    }
    main.download .elfMoss{
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 48px;
    }
    main.download .ochre{
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--page-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    }
    main.download .ochre svg{
    width: 24px;
    height: 24px;
    fill: var(--page-text);
    }
    main.download .zag5 h2{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--page-text);
    margin-bottom: 12px;
    }
    main.download .zag5 p{
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--page-muted);
    max-width: 560px;
    }
    main.download .zag5 a{
    color: var(--page-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    }
    main.download .zag5 a:hover{
    text-decoration: none;
    }
    main.download .plume{
    display: flex;
    gap: 24px;
    margin-top: 20px;
    }
    main.download .cog_wisp{
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--page-text);
    padding: 6px 12px;
    border: 1px solid var(--page-border);
    background: var(--page-bg);
    }
    main.download .iota{
    background: var(--page-text);
    color: hsl(47, 5%, 55%);
    padding: 40px 24px;
    }
    main.download .nixPulse{
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    }
    main.download .rosin{
    font-size: 0.78rem;
    }
    main.download .tuft{
    display: flex;
    gap: 24px;
    }
    main.download .tuft a{
    font-size: 0.78rem;
    color: hsl(47, 5%, 55%);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.download .tuft a:hover{
    color: var(--page-bg);
    }
    @media (max-width: 768px) {main.download .quorum{
    grid-template-columns: repeat(2, 1fr);
    }
    main.download .xylol{
    grid-template-columns: 1fr;
    }
    main.download .quag{
    grid-template-columns: 1fr;
    }
    main.download .elfMoss{
    flex-direction: column;
    gap: 24px;
    }
    main.download .bramble{
    padding: 60px 20px 48px;
    }}
    @media (max-width: 480px) {main.download .quorum{
    grid-template-columns: 1fr;
    }
    main.download .rusk{
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
    }
    main.download .nixPulse{
    flex-direction: column;
    align-items: flex-start;
    }
    main.download .plume{
    flex-wrap: wrap;
    }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .crumble {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .duskMeld {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    gap: 32px;
    }
    
    .juniper {
    flex-shrink: 0;
    }
    .blotch {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--nav-text);
    }
    .lignite {
    color: var(--primary-color);
    }
    .galvanic {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: inherit;
    }
    
    .ember {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 4px;
    flex: 1;
    justify-content: center;
    }
    .myrrh {
    position: relative;
    }
    .gnaw {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 400;
    color: var(--nav-text-muted);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: var(--transition);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    }
    .gnaw:hover,
    .gnaw:focus-visible {
    color: var(--nav-text);
    }
    .orc {
    cursor: default;
    }
    .quilted {
    transition: transform 0.2s ease;
    opacity: 0.5;
    }
    
    .quasar {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    background: var(--nav-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-lg);
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    }
    .zephyr:hover .quasar,
    .zephyr:focus-within .quasar {
    opacity: 1;
    visibility: visible;
    }
    .zephyr:hover .quilted {
    transform: rotate(180deg);
    }
    .vortex3 {
    display: block;
    padding: 9px 20px;
    font-size: 13px;
    color: var(--nav-text-muted);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .vortex3:hover {
    color: var(--nav-text);
    background: rgba(255, 255, 255, 0.04);
    }
    
    .pixel_hum {
    flex-shrink: 0;
    }
    .dawnLit {
    display: inline-block;
    padding: 8px 22px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--text-color);
    background: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .dawnLit:hover {
    background: hsl(47, 70%, 44%);
    }
    .dawnLit:active {
    transform: scale(0.97);
    }
    
    .fizzPop {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    }
    .prong {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--nav-text);
    transition: var(--transition);
    }
    
    .sluice {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001; color: #ffffff;}
    .kv9 {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: var(--nav-bg);
    z-index: 1002;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    }
    .woven {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--nav-text);
    }
    .riptide {
    background: none;
    border: none;
    color: var(--nav-text);
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    }
    .ratchet {
    list-style: none;
    padding: 12px 0;
    }
    .tremolo {
    display: block;
    padding: 12px 24px;
    font-size: 14px;
    color: var(--nav-text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .tremolo:hover {
    color: var(--nav-text);
    }
    .saxo {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 12px 24px;
    font-size: 14px;
    font-family: inherit;
    color: var(--nav-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
    }
    .saxo:hover {
    color: var(--nav-text);
    }
    .fog_ray {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    }
    .bevel.is-open .fog_ray {
    max-height: 300px;
    }
    .bevel.is-open .quilted {
    transform: rotate(180deg);
    }
    .fog_ray .tremolo {
    padding-left: 40px;
    font-size: 13px;
    }
    .cobalt_fin {
    padding: 16px 20px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    .cask7 {
    display: block;
    text-align: center;
    width: 100%;
    }
    
    .nav-mobile-open .sluice {
    display: block;
    }
    .nav-mobile-open .kv9 {
    display: flex;
    transform: translateX(0);
    }
    
    @media (max-width: 860px) {.ember,
    .pixel_hum {
    display: none;
    }
    .fizzPop {
    display: flex;
    }}
    @media (min-width: 861px) {.sluice,
    .kv9 {
    display: none !important;
    }}
    .vortex3.active {color: var(--nav-text); background: rgba(255, 255, 255, 0.04);}
    .gnaw.active {color: var(--primary-color, #7c3aed); background: var(--border-color, rgba(0,0,0,0.08)); border-radius: var(--radius-sm, 8px);}
    .tremolo.active {color: var(--nav-text);}
    @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.features *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    main.features .glacier{
    background: var(--feat-bg-dark);
    color: #fff;
    padding: 100px 24px 80px;
    position: relative;
    overflow: hidden;
    }
    main.features .glacier::before{
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, hsla(47, 70%, 57%, 0.12) 0%, transparent 70%);
    pointer-events: none;
    }
    main.features .vortex{
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    }
    main.features .glacier h1{
    font-family: var(--feat-serif);
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 20px;
    }
    main.features .glacier h1 span{
    color: var(--feat-primary);
    }
    main.features .cobalt{
    font-family: var(--feat-sans);
    font-size: 1.05rem;
    line-height: 1.75;
    color: hsl(47, 5%, 68%);
    margin-bottom: 32px;
    }
    main.features .pulse{
    display: inline-block;
    background: var(--feat-primary);
    color: var(--feat-bg-dark);
    font-family: var(--feat-sans);
    font-weight: 700;
    font-size: 1rem;
    padding: 14px 36px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    }
    main.features .pulse:hover{
    background: var(--feat-primary-dark);
    transform: translateY(-1px);
    }
    main.features .phantom{
    position: relative;
    }
    main.features .phantom img{
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    filter: brightness(0.92) contrast(1.05);
    }
    main.features .phantom::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, hsla(47, 70%, 57%, 0.08), transparent 60%);
    pointer-events: none;
    }
    main.features .nectar{
    padding: 80px 24px;
    max-width: 1120px;
    margin: 0 auto;
    }
    main.features .lumen{
    background: var(--feat-bg-dark);
    max-width: 100%;
    padding: 80px 24px;
    }
    main.features .lumen .zenith{
    max-width: 1120px;
    margin: 0 auto;
    }
    main.features .mosaic{
    margin-bottom: 56px;
    }
    main.features .mosaic h2{
    font-family: var(--feat-serif);
    font-size: 2rem;
    font-weight: 700;
    color: var(--feat-text, #1a1a1a);
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    }
    main.features .lumen .mosaic h2{
    color: #fff;
    }
    main.features .mosaic p{
    font-family: var(--feat-sans);
    font-size: 1rem;
    color: var(--feat-text-muted);
    line-height: 1.7;
    max-width: 640px;
    }
    main.features .lumen .mosaic p{
    color: hsl(47, 5%, 60%);
    }
    main.features .marble{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    }
    main.features .opal{
    background: var(--feat-bg-card);
    padding: 40px 32px;
    border: 1px solid var(--feat-border);
    transition: background 0.2s;
    position: relative;
    }
    main.features .opal:hover{
    background: hsl(47, 7%, 97%);
    }
    main.features .flint{
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    background: var(--feat-bg-dark);
    color: var(--feat-primary);
    font-size: 1.3rem;
    }
    main.features .opal h3{
    font-family: var(--feat-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--feat-text);
    margin-bottom: 12px;
    }
    main.features .opal p{
    font-family: var(--feat-sans);
    font-size: 0.9rem;
    color: var(--feat-text-muted);
    line-height: 1.7;
    }
    main.features .brinePod{
    display: inline-block;
    font-family: var(--feat-sans);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--feat-secondary-dark);
    background: hsla(117, 56%, 57%, 0.1);
    padding: 3px 10px;
    margin-top: 16px;
    }
    main.features .kelp{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    }
    main.features .sapphire{
    overflow: hidden;
    }
    main.features .sapphire img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 400px;
    filter: brightness(0.88) contrast(1.08);
    }
    main.features .jade{
    padding: 60px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--feat-bg-dark);
    color: #fff;
    }
    main.features .jade h2{
    font-family: var(--feat-serif);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
    }
    main.features .jade p{
    font-family: var(--feat-sans);
    font-size: 0.95rem;
    line-height: 1.8;
    color: hsl(47, 5%, 65%);
    margin-bottom: 16px;
    }
    main.features .obsidian{
    list-style: none;
    padding: 0;
    margin: 8px 0 28px;
    }
    main.features .obsidian li{
    font-family: var(--feat-sans);
    font-size: 0.9rem;
    color: hsl(47, 5%, 72%);
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    }
    main.features .obsidian li::before{
    content: "—";
    color: var(--feat-primary);
    font-weight: 700;
    }
    main.features .grove{
    display: inline-block;
    background: var(--feat-primary);
    color: var(--feat-bg-dark);
    font-family: var(--feat-sans);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 12px 28px;
    text-decoration: none;
    align-self: flex-start;
    transition: background 0.2s;
    }
    main.features .grove:hover{
    background: var(--feat-primary-dark);
    }
    main.features .falcon{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--feat-border);
    }
    main.features .prism{
    padding: 40px 24px;
    text-align: center;
    border-right: 1px solid var(--feat-border);
    }
    main.features .prism:last-child{
    border-right: none;
    }
    main.features .crimson{
    font-family: var(--feat-serif);
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--feat-text);
    line-height: 1;
    margin-bottom: 8px;
    }
    main.features .haze{
    font-family: var(--feat-sans);
    font-size: 0.85rem;
    color: var(--feat-text-muted);
    }
    main.features .quartz{
    width: 100%;
    border-collapse: collapse;
    font-family: var(--feat-sans);
    }
    main.features .quartz thead{
    background: var(--feat-bg-dark);
    color: #fff;
    }
    main.features .quartz th{
    padding: 16px 20px;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: left;
    letter-spacing: 0.04em;
    }
    main.features .quartz th:first-child{
    font-family: var(--feat-serif);
    font-size: 0.95rem;
    }
    main.features .quartz td{
    padding: 14px 20px;
    font-size: 0.88rem;
    color: var(--feat-text);
    border-bottom: 1px solid var(--feat-border);
    }
    main.features .quartz tbody tr:hover{
    background: hsl(47, 7%, 97%);
    }
    main.features .quartz .dusk{
    color: var(--feat-secondary-dark);
    font-weight: 700;
    font-size: 1.1rem;
    }
    main.features .quartz .velvet{
    color: hsl(0, 50%, 55%);
    font-size: 1.1rem;
    }
    main.features .nimbus{
    background: var(--feat-bg-dark);
    padding: 80px 24px;
    text-align: center;
    }
    main.features .nimbus h2{
    font-family: var(--feat-serif);
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    }
    main.features .nimbus p{
    font-family: var(--feat-sans);
    font-size: 1rem;
    color: hsl(47, 5%, 60%);
    margin-bottom: 32px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
    }
    main.features .cedar{
    display: inline-block;
    background: var(--feat-primary);
    color: var(--feat-bg-dark);
    font-family: var(--feat-sans);
    font-weight: 700;
    font-size: 1.05rem;
    padding: 16px 44px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    }
    main.features .cedar:hover{
    background: var(--feat-primary-dark);
    transform: translateY(-1px);
    }
    main.features .onyx{
    background: var(--feat-bg-dark);
    border-top: 1px solid hsl(47, 5%, 18%);
    padding: 32px 24px;
    text-align: center;
    }
    main.features .aurora{
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    }
    main.features .clave{
    font-family: var(--feat-serif);
    font-size: 1rem;
    font-weight: 700;
    color: hsl(47, 5%, 50%);
    }
    main.features .ivory{
    font-family: var(--feat-sans);
    font-size: 0.8rem;
    color: hsl(47, 5%, 40%);
    }
    main.features .basalt{
    display: flex;
    gap: 20px;
    }
    main.features .basalt a{
    font-family: var(--feat-sans);
    font-size: 0.8rem;
    color: hsl(47, 5%, 45%);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.features .basalt a:hover{
    color: var(--feat-primary);
    }
    main.features .tundra{
    display: inline-block;
    font-family: var(--feat-sans);
    font-size: 0.75rem;
    color: hsl(47, 5%, 55%);
    border: 1px solid hsl(47, 5%, 25%);
    padding: 4px 12px;
    margin-bottom: 20px;
    letter-spacing: 0.06em;
    }
    @media (max-width: 900px) {main.features .vortex{
    grid-template-columns: 1fr;
    gap: 40px;
    }
    main.features .glacier h1{
    font-size: 2rem;
    }
    main.features .marble{
    grid-template-columns: repeat(2, 1fr);
    }
    main.features .kelp{
    grid-template-columns: 1fr;
    }
    main.features .sapphire img{
    min-height: 260px;
    }
    main.features .falcon{
    grid-template-columns: repeat(2, 1fr);
    }
    main.features .prism:nth-child(2){
    border-right: none;
    }
    main.features .prism:nth-child(1), main.features .prism:nth-child(2){
    border-bottom: 1px solid var(--feat-border);
    }
    main.features .aurora{
    flex-direction: column;
    gap: 16px;
    }}
    @media (max-width: 600px) {main.features .glacier{
    padding: 72px 16px 56px;
    }
    main.features .glacier h1{
    font-size: 1.6rem;
    }
    main.features .marble{
    grid-template-columns: 1fr;
    }
    main.features .jade{
    padding: 40px 24px;
    }
    main.features .falcon{
    grid-template-columns: 1fr;
    }
    main.features .prism{
    border-right: none;
    border-bottom: 1px solid var(--feat-border);
    }
    main.features .prism:last-child{
    border-bottom: none;
    }
    main.features .quartz{
    font-size: 0.8rem;
    }
    main.features .quartz th, main.features .quartz td{
    padding: 10px 12px;
    }
    main.features .nectar{
    padding: 56px 16px;
    }
    main.features .lumen{
    padding: 56px 16px;
    }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .crumble {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .duskMeld {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    gap: 32px;
    }
    
    .juniper {
    flex-shrink: 0;
    }
    .blotch {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--nav-text);
    }
    .lignite {
    color: var(--primary-color);
    }
    .galvanic {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: inherit;
    }
    
    .ember {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 4px;
    flex: 1;
    justify-content: center;
    }
    .myrrh {
    position: relative;
    }
    .gnaw {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 400;
    color: var(--nav-text-muted);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: var(--transition);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    }
    .gnaw:hover,
    .gnaw:focus-visible {
    color: var(--nav-text);
    }
    .orc {
    cursor: default;
    }
    .quilted {
    transition: transform 0.2s ease;
    opacity: 0.5;
    }
    
    .quasar {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    background: var(--nav-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-lg);
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    }
    .zephyr:hover .quasar,
    .zephyr:focus-within .quasar {
    opacity: 1;
    visibility: visible;
    }
    .zephyr:hover .quilted {
    transform: rotate(180deg);
    }
    .vortex3 {
    display: block;
    padding: 9px 20px;
    font-size: 13px;
    color: var(--nav-text-muted);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .vortex3:hover {
    color: var(--nav-text);
    background: rgba(255, 255, 255, 0.04);
    }
    
    .pixel_hum {
    flex-shrink: 0;
    }
    .dawnLit {
    display: inline-block;
    padding: 8px 22px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--text-color);
    background: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .dawnLit:hover {
    background: hsl(47, 70%, 44%);
    }
    .dawnLit:active {
    transform: scale(0.97);
    }
    
    .fizzPop {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    }
    .prong {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--nav-text);
    transition: var(--transition);
    }
    
    .sluice {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001; color: #ffffff;}
    .kv9 {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: var(--nav-bg);
    z-index: 1002;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    }
    .woven {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--nav-text);
    }
    .riptide {
    background: none;
    border: none;
    color: var(--nav-text);
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    }
    .ratchet {
    list-style: none;
    padding: 12px 0;
    }
    .tremolo {
    display: block;
    padding: 12px 24px;
    font-size: 14px;
    color: var(--nav-text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .tremolo:hover {
    color: var(--nav-text);
    }
    .saxo {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 12px 24px;
    font-size: 14px;
    font-family: inherit;
    color: var(--nav-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
    }
    .saxo:hover {
    color: var(--nav-text);
    }
    .fog_ray {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    }
    .bevel.is-open .fog_ray {
    max-height: 300px;
    }
    .bevel.is-open .quilted {
    transform: rotate(180deg);
    }
    .fog_ray .tremolo {
    padding-left: 40px;
    font-size: 13px;
    }
    .cobalt_fin {
    padding: 16px 20px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    .cask7 {
    display: block;
    text-align: center;
    width: 100%;
    }
    
    .nav-mobile-open .sluice {
    display: block;
    }
    .nav-mobile-open .kv9 {
    display: flex;
    transform: translateX(0);
    }
    
    @media (max-width: 860px) {.ember,
    .pixel_hum {
    display: none;
    }
    .fizzPop {
    display: flex;
    }}
    @media (min-width: 861px) {.sluice,
    .kv9 {
    display: none !important;
    }}
    .vortex3.active {color: var(--nav-text); background: rgba(255, 255, 255, 0.04);}
    .gnaw.active {color: var(--primary-color, #7c3aed); background: var(--border-color, rgba(0,0,0,0.08)); border-radius: var(--radius-sm, 8px);}
    .tremolo.active {color: var(--nav-text);}
    @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.extensions *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    main.extensions{
    font-family: "Noto Sans SC", sans-serif;
    color: var(--ext-text, #1f1d17);
    background: var(--ext-bg, #f2f1ee);
    overflow-x: hidden;
    }
    main.extensions .rune{
    background: var(--ext-dark, #161510);
    color: #fff;
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
    }
    main.extensions .rune::before{
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, hsla(47, 70%, 57%, 0.12) 0%, transparent 70%);
    pointer-events: none;
    }
    main.extensions .dune{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    }
    main.extensions .summit{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    }
    main.extensions .rune h1{
    font-family: "Noto Serif SC", serif;
    font-size: 42px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
    }
    main.extensions .rune h1 span{
    color: var(--ext-primary, #d4b044);
    }
    main.extensions .kite{
    font-size: 16px;
    line-height: 1.8;
    color: hsla(0, 0%, 100%, 0.7);
    margin-bottom: 32px;
    }
    main.extensions .nova{
    display: inline-block;
    background: var(--ext-primary, #d4b044);
    color: var(--ext-dark, #161510);
    font-weight: 700;
    font-size: 15px;
    padding: 14px 36px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
    }
    main.extensions .nova:hover{
    background: var(--ext-primary-dark, #b8952e);
    transform: translateY(-1px);
    }
    main.extensions .oxide{
    position: relative;
    }
    main.extensions .oxide img{
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
    filter: brightness(0.9);
    }
    main.extensions .urchin{
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: var(--ext-primary, #d4b044);
    color: var(--ext-dark, #161510);
    font-weight: 700;
    font-size: 13px;
    padding: 8px 16px;
    letter-spacing: 0.5px;
    }
    
    main.extensions .wander{
    padding: 80px 0;
    }
    main.extensions .lantern{
    margin-bottom: 48px;
    }
    main.extensions .lantern h2{
    font-family: "Noto Serif SC", serif;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.3px;
    }
    main.extensions .lantern p{
    color: var(--ext-text-secondary, #6b6558);
    font-size: 15px;
    line-height: 1.7;
    }
    main.extensions .cipher{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    }
    main.extensions .monolith{
    background: var(--ext-surface, #fff);
    padding: 36px 28px;
    transition: background 0.2s;
    cursor: default;
    }
    main.extensions .monolith:hover{
    background: var(--ext-surface-alt, #e9e8e4);
    }
    main.extensions .hollow{
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 20px;
    background: var(--ext-dark, #161510);
    color: var(--ext-primary, #d4b044);
    }
    main.extensions .monolith h3{
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    }
    main.extensions .monolith p{
    font-size: 13px;
    color: var(--ext-text-secondary, #6b6558);
    line-height: 1.6;
    }
    
    main.extensions .inlet{
    padding: 80px 0;
    background: var(--ext-dark, #161510);
    color: #fff;
    }
    main.extensions .inlet .lantern h2{
    color: #fff;
    }
    main.extensions .inlet .lantern p{
    color: hsla(0, 0%, 100%, 0.5);
    }
    main.extensions .umbra{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    }
    main.extensions .wren{
    background: var(--ext-dark-surface, #231f18);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    transition: background 0.2s;
    }
    main.extensions .wren:hover{
    background: hsl(47, 8%, 18%); color: #ffffff;}
    main.extensions .pebble{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
    }
    main.extensions .shard{
    width: 48px;
    height: 48px;
    background: hsla(47, 70%, 57%, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    }
    main.extensions .yarn{
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ext-primary, #d4b044);
    padding: 4px 10px;
    border: 1px solid hsla(47, 70%, 57%, 0.3);
    }
    main.extensions .wren h3{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    }
    main.extensions .totem{
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.55);
    line-height: 1.7;
    margin-bottom: 20px;
    flex: 1;
    }
    main.extensions .plume{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid hsla(0, 0%, 100%, 0.08);
    }
    main.extensions .vapor{
    font-size: 13px;
    color: var(--ext-primary, #d4b044);
    font-weight: 600;
    }
    main.extensions .bloom{
    font-size: 12px;
    color: hsla(0, 0%, 100%, 0.4);
    }
    
    main.extensions .epoch{
    padding: 80px 0;
    }
    main.extensions .xeno{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    }
    main.extensions .ignite{
    position: relative;
    overflow: hidden;
    }
    main.extensions .ignite img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 400px;
    }
    main.extensions .axiom{
    background: var(--ext-surface, #fff);
    padding: 60px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    }
    main.extensions .axiom h2{
    font-family: "Noto Serif SC", serif;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.4;
    }
    main.extensions .axiom p{
    font-size: 14px;
    color: var(--ext-text-secondary, #6b6558);
    line-height: 1.8;
    margin-bottom: 16px;
    }
    main.extensions .quartz{
    list-style: none;
    margin: 20px 0 32px;
    counter-reset: step;
    }
    main.extensions .quartz li{
    counter-increment: step;
    font-size: 14px;
    line-height: 1.7;
    padding: 10px 0;
    padding-left: 40px;
    position: relative;
    border-bottom: 1px solid var(--ext-border, #d9d7d1);
    }
    main.extensions .quartz li::before{
    content: counter(step);
    position: absolute;
    left: 0;
    top: 10px;
    width: 26px;
    height: 26px;
    background: var(--ext-dark, #161510);
    color: var(--ext-primary, #d4b044);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    main.extensions .helix{
    color: var(--ext-primary-dark, #b8952e);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
    transition: color 0.2s;
    }
    main.extensions .helix:hover{
    color: var(--ext-text, #1f1d17);
    }
    
    main.extensions .karma{
    padding: 80px 0;
    background: var(--ext-surface-alt, #e9e8e4);
    }
    main.extensions .phantom{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    }
    main.extensions .glacier{
    background: var(--ext-surface, #fff);
    padding: 36px 28px;
    }
    main.extensions .quiver{
    font-family: "Noto Serif SC", serif;
    font-size: 36px;
    font-weight: 900;
    color: var(--ext-border, #d9d7d1);
    margin-bottom: 16px;
    line-height: 1;
    }
    main.extensions .glacier h3{
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    }
    main.extensions .glacier p{
    font-size: 13px;
    color: var(--ext-text-secondary, #6b6558);
    line-height: 1.7;
    }
    
    main.extensions .ext-dev{
    padding: 80px 0;
    }
    main.extensions .ext-dev-inner{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    }
    main.extensions .ext-dev-content h2{
    font-family: "Noto Serif SC", serif;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
    }
    main.extensions .ext-dev-content p{
    font-size: 14px;
    color: var(--ext-text-secondary, #6b6558);
    line-height: 1.8;
    margin-bottom: 24px;
    }
    main.extensions .ext-dev-features{
    list-style: none;
    }
    main.extensions .ext-dev-features li{
    font-size: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ext-border, #d9d7d1);
    display: flex;
    align-items: center;
    gap: 12px;
    }
    main.extensions .ext-dev-features li::before{
    content: "→";
    color: var(--ext-primary-dark, #b8952e);
    font-weight: 700;
    flex-shrink: 0;
    }
    main.extensions .ext-dev-img img{
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    }
    
    main.extensions .ext-cta-banner{
    background: var(--ext-dark, #161510);
    padding: 72px 0;
    text-align: center;
    color: #fff;
    }
    main.extensions .ext-cta-banner h2{
    font-family: "Noto Serif SC", serif;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
    }
    main.extensions .ext-cta-banner p{
    color: hsla(0, 0%, 100%, 0.55);
    font-size: 15px;
    margin-bottom: 32px;
    }
    main.extensions .ext-cta-btn{
    display: inline-block;
    background: var(--ext-primary, #d4b044);
    color: var(--ext-dark, #161510);
    font-weight: 700;
    font-size: 15px;
    padding: 16px 48px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
    }
    main.extensions .ext-cta-btn:hover{
    background: var(--ext-primary-dark, #b8952e);
    transform: translateY(-1px);
    }
    
    main.extensions .ext-update{
    padding: 48px 0;
    border-top: 1px solid var(--ext-border, #d9d7d1);
    }
    main.extensions .ext-update-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--ext-text-secondary, #6b6558);
    }
    main.extensions .ext-update-date{
    font-weight: 600;
    color: var(--ext-text, #1f1d17);
    }
    
    main.extensions .ext-footer{
    background: var(--ext-dark, #161510);
    color: hsla(0, 0%, 100%, 0.45);
    padding: 48px 0;
    }
    main.extensions .ext-footer-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    }
    main.extensions .ext-footer-brand{
    font-family: "Noto Serif SC", serif;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    }
    main.extensions .ext-footer-brand span{
    display: block;
    font-family: "Noto Sans SC", sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: hsla(0, 0%, 100%, 0.35);
    margin-top: 4px;
    }
    main.extensions .ext-footer-links{
    display: flex;
    gap: 24px;
    list-style: none;
    }
    main.extensions .ext-footer-links a{
    color: hsla(0, 0%, 100%, 0.45);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
    }
    main.extensions .ext-footer-links a:hover{
    color: var(--ext-primary, #d4b044);
    }
    main.extensions .ext-footer-copy{
    font-size: 12px;
    }
    @media (max-width: 960px) {main.extensions .summit{
    grid-template-columns: 1fr;
    gap: 40px;
    }
    main.extensions .rune h1{
    font-size: 32px;
    }
    main.extensions .cipher{
    grid-template-columns: repeat(2, 1fr);
    }
    main.extensions .umbra{
    grid-template-columns: repeat(2, 1fr);
    }
    main.extensions .xeno{
    grid-template-columns: 1fr;
    }
    main.extensions .ignite img{
    min-height: 280px;
    }
    main.extensions .ext-dev-inner{
    grid-template-columns: 1fr;
    gap: 40px;
    }
    main.extensions .phantom{
    grid-template-columns: 1fr;
    }
    main.extensions .ext-footer-inner{
    flex-direction: column;
    gap: 20px;
    text-align: center;
    }}
    @media (max-width: 600px) {main.extensions .dune{
    padding: 0 20px;
    }
    main.extensions .rune{
    padding: 72px 0 56px;
    }
    main.extensions .rune h1{
    font-size: 26px;
    }
    main.extensions .cipher{
    grid-template-columns: 1fr;
    }
    main.extensions .umbra{
    grid-template-columns: 1fr;
    }
    main.extensions .axiom{
    padding: 40px 28px;
    }
    main.extensions .lantern h2{
    font-size: 26px;
    }}
    main.extensions .crest{
    background-color: var(--text-color, #1c1a14);
    color: var(--bg-color, #f2f1ef);
    padding: 64px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    }
    main.extensions .delta{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    padding: 0 24px;
    }
    main.extensions .etch{
    display: flex;
    gap: 48px;
    }
    main.extensions .timber{
    flex: 1.4;
    }
    main.extensions .fable{
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 0 12px;
    color: var(--primary-color, hsl(47, 70%, 50%));
    }
    main.extensions .orbit{
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    color: hsl(47, 6%, 62%);
    max-width: 280px;
    }
    main.extensions .forge{
    flex: 1;
    }
    main.extensions .ridgeline{
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 16px;
    color: hsl(47, 10%, 80%);
    }
    main.extensions .lattice{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }
    main.extensions .nexus{
    line-height: 1;
    }
    main.extensions .vivid{
    font-size: 14px;
    color: hsl(47, 6%, 56%);
    text-decoration: none;
    transition: var(--transition, all 0.2s ease);
    line-height: 1.5;
    }
    main.extensions .vivid:hover{
    color: var(--primary-color, hsl(47, 70%, 50%));
    }
    main.extensions .mirth{
    height: 1px;
    background: hsl(47, 6%, 22%);
    margin-top: 56px; color: #ffffff;}
    main.extensions .vortex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    }
    main.extensions .jovial{
    font-size: 13px;
    color: hsl(47, 6%, 44%);
    margin: 0;
    flex-shrink: 0;
    }
    main.extensions .alcove{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    }
    main.extensions .glyph{
    font-size: 13px;
    color: hsl(47, 6%, 44%);
    text-decoration: none;
    transition: var(--transition, all 0.2s ease);
    }
    main.extensions .glyph:hover{
    color: var(--primary-color, hsl(47, 70%, 50%));
    }
    main.extensions .grain{
    color: hsl(47, 6%, 30%);
    font-size: 13px;
    }
    @media (max-width: 768px) {main.extensions .crest{
    padding: 48px 0 0;
    }
    main.extensions .etch{
    flex-direction: column;
    gap: 36px;
    }
    main.extensions .timber{
    flex: none;
    }
    main.extensions .orbit{
    max-width: 100%;
    }
    main.extensions .forge{
    flex: none;
    }
    main.extensions .mirth{
    margin-top: 40px;
    }
    main.extensions .vortex{
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    padding: 20px 0;
    }
    main.extensions .alcove{
    flex-wrap: wrap;
    }}
    main.extensions .briar{
    position: relative;
    z-index: 1;
    }

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .crumble {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .duskMeld {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    gap: 32px;
    }
    
    .juniper {
    flex-shrink: 0;
    }
    .blotch {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--nav-text);
    }
    .lignite {
    color: var(--primary-color);
    }
    .galvanic {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: inherit;
    }
    
    .ember {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 4px;
    flex: 1;
    justify-content: center;
    }
    .myrrh {
    position: relative;
    }
    .gnaw {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 400;
    color: var(--nav-text-muted);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: var(--transition);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    }
    .gnaw:hover,
    .gnaw:focus-visible {
    color: var(--nav-text);
    }
    .orc {
    cursor: default;
    }
    .quilted {
    transition: transform 0.2s ease;
    opacity: 0.5;
    }
    
    .quasar {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    background: var(--nav-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-lg);
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    }
    .zephyr:hover .quasar,
    .zephyr:focus-within .quasar {
    opacity: 1;
    visibility: visible;
    }
    .zephyr:hover .quilted {
    transform: rotate(180deg);
    }
    .vortex3 {
    display: block;
    padding: 9px 20px;
    font-size: 13px;
    color: var(--nav-text-muted);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .vortex3:hover {
    color: var(--nav-text);
    background: rgba(255, 255, 255, 0.04);
    }
    
    .pixel_hum {
    flex-shrink: 0;
    }
    .dawnLit {
    display: inline-block;
    padding: 8px 22px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--text-color);
    background: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .dawnLit:hover {
    background: hsl(47, 70%, 44%);
    }
    .dawnLit:active {
    transform: scale(0.97);
    }
    
    .fizzPop {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    }
    .prong {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--nav-text);
    transition: var(--transition);
    }
    
    .sluice {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001; color: #ffffff;}
    .kv9 {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: var(--nav-bg);
    z-index: 1002;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    }
    .woven {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--nav-text);
    }
    .riptide {
    background: none;
    border: none;
    color: var(--nav-text);
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    }
    .ratchet {
    list-style: none;
    padding: 12px 0;
    }
    .tremolo {
    display: block;
    padding: 12px 24px;
    font-size: 14px;
    color: var(--nav-text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .tremolo:hover {
    color: var(--nav-text);
    }
    .saxo {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 12px 24px;
    font-size: 14px;
    font-family: inherit;
    color: var(--nav-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
    }
    .saxo:hover {
    color: var(--nav-text);
    }
    .fog_ray {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    }
    .bevel.is-open .fog_ray {
    max-height: 300px;
    }
    .bevel.is-open .quilted {
    transform: rotate(180deg);
    }
    .fog_ray .tremolo {
    padding-left: 40px;
    font-size: 13px;
    }
    .cobalt_fin {
    padding: 16px 20px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    .cask7 {
    display: block;
    text-align: center;
    width: 100%;
    }
    
    .nav-mobile-open .sluice {
    display: block;
    }
    .nav-mobile-open .kv9 {
    display: flex;
    transform: translateX(0);
    }
    
    @media (max-width: 860px) {.ember,
    .pixel_hum {
    display: none;
    }
    .fizzPop {
    display: flex;
    }}
    @media (min-width: 861px) {.sluice,
    .kv9 {
    display: none !important;
    }}
    .vortex3.active {color: var(--nav-text); background: rgba(255, 255, 255, 0.04);}
    .gnaw.active {color: var(--primary-color, #7c3aed); background: var(--border-color, rgba(0,0,0,0.08)); border-radius: var(--radius-sm, 8px);}
    .tremolo.active {color: var(--nav-text);}
    @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.guide .ivory{
    background: var(--guide-dark);
    color: #fff;
    padding: 80px 24px 64px;
    position: relative;
    overflow: hidden;
    }
    main.guide .ivory::before{
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, hsla(47, 70%, 57%, 0.12) 0%, transparent 70%);
    pointer-events: none;
    }
    main.guide .onyx{
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    }
    main.guide .cascade{
    font-family: var(--guide-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--guide-primary);
    margin-bottom: 20px;
    display: inline-block;
    }
    main.guide .ivory h1{
    font-family: var(--guide-serif);
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 900;
    line-height: 1.25;
    margin: 0 0 24px;
    color: #fff;
    }
    main.guide .ivory h1 span{
    color: var(--guide-primary);
    }
    main.guide .warp{
    font-family: var(--guide-sans);
    font-size: 16px;
    line-height: 1.75;
    color: hsla(0, 0%, 100%, 0.7);
    max-width: 640px;
    margin: 0;
    }
    main.guide .flux{
    display: flex;
    gap: 32px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid hsla(0, 0%, 100%, 0.1);
    flex-wrap: wrap;
    }
    main.guide .pulse{
    font-family: var(--guide-sans);
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.5);
    }
    main.guide .pulse strong{
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
    font-family: var(--guide-serif);
    }
    main.guide .guide-toc{
    background: var(--guide-surface, #fff);
    border-bottom: 1px solid var(--guide-border);
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 90;
    }
    main.guide .guide-toc-inner{
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    }
    main.guide .guide-toc-inner::-webkit-scrollbar{
    display: none;
    }
    main.guide .guide-toc-link{
    font-family: var(--guide-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--guide-text-muted);
    text-decoration: none;
    padding: 16px 20px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    }
    main.guide .guide-toc-link:hover, main.guide .guide-toc-link:focus{
    color: var(--guide-text);
    border-bottom-color: var(--guide-primary);
    }
    main.guide .guide-toc-num{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--guide-surface-alt);
    font-size: 11px;
    font-weight: 700;
    }
    main.guide .cobalt{
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
    }
    main.guide .husk{
    padding: 64px 0;
    border-bottom: 1px solid var(--guide-border);
    }
    main.guide .husk:last-of-type{
    border-bottom: none;
    }
    main.guide .yield{
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 32px;
    }
    main.guide .riddle{
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--guide-dark);
    color: var(--guide-primary);
    font-family: var(--guide-serif);
    font-size: 20px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    main.guide .vale{
    font-family: var(--guide-serif);
    font-size: clamp(22px, 3.5vw, 30px);
    font-weight: 700;
    color: var(--guide-text, #1a1a1a);
    margin: 0;
    line-height: 1.3;
    padding-top: 8px;
    }
    main.guide .alchemy{
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    }
    main.guide .alchemy.jubilee{
    grid-template-columns: 1fr 1fr;
    }
    main.guide .haven p{
    font-family: var(--guide-sans);
    font-size: 15px;
    line-height: 1.8;
    color: var(--guide-text-muted);
    margin: 0 0 16px;
    }
    main.guide .haven p:last-child{
    margin-bottom: 0;
    }
    main.guide .zenith{
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    }
    main.guide .zenith li{
    font-family: var(--guide-sans);
    font-size: 14px;
    line-height: 1.7;
    color: var(--guide-text, #1a1a1a);
    padding: 14px 16px;
    background: var(--guide-surface-alt);
    display: flex;
    gap: 12px;
    align-items: flex-start;
    }
    main.guide .zenith li::before{
    content: attr(data-step);
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: var(--guide-dark);
    color: var(--guide-primary);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    }
    main.guide .mythos{
    position: relative;
    overflow: hidden;
    background: var(--guide-surface-alt);
    }
    main.guide .mythos img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    }
    main.guide .dusk{
    margin-top: 24px;
    padding: 16px 20px;
    background: hsla(47, 70%, 57%, 0.08);
    border-left: 3px solid var(--guide-primary);
    font-family: var(--guide-sans);
    font-size: 13px;
    line-height: 1.7;
    color: var(--guide-text);
    }
    main.guide .dusk strong{
    color: var(--guide-primary-dark);
    }
    main.guide .thorn{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 20px;
    }
    main.guide .grove{
    padding: 16px;
    background: var(--guide-surface-alt);
    display: flex;
    flex-direction: column;
    gap: 6px;
    }
    main.guide .nebula{
    font-family: "SF Mono", "Consolas", monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--guide-text);
    letter-spacing: 0.5px;
    }
    main.guide .crux{
    font-family: var(--guide-sans);
    font-size: 12px;
    color: var(--guide-text-muted);
    }
    main.guide .basalt{
    background: var(--guide-dark);
    padding: 64px 24px;
    text-align: center;
    margin-top: 0;
    }
    main.guide .aurora{
    max-width: 560px;
    margin: 0 auto;
    }
    main.guide .basalt h2{
    font-family: var(--guide-serif);
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 900;
    color: #fff;
    margin: 0 0 16px;
    }
    main.guide .basalt p{
    font-family: var(--guide-sans);
    font-size: 15px;
    color: hsla(0, 0%, 100%, 0.6);
    line-height: 1.7;
    margin: 0 0 32px;
    }
    main.guide .latch{
    display: inline-block;
    padding: 16px 48px;
    background: var(--guide-primary);
    color: var(--guide-dark);
    font-family: var(--guide-sans);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: background 0.2s, transform 0.15s;
    }
    main.guide .latch:hover{
    background: var(--guide-primary-dark);
    transform: translateY(-1px);
    }
    main.guide .mosaic{
    background: var(--guide-dark);
    border-top: 1px solid hsla(0, 0%, 100%, 0.06);
    padding: 32px 24px;
    text-align: center;
    }
    main.guide .jade{
    font-family: var(--guide-sans);
    font-size: 12px;
    color: hsla(0, 0%, 100%, 0.35);
    margin: 0;
    }
    main.guide .bramble{
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 16px;
    }
    main.guide .bramble a{
    font-family: var(--guide-sans);
    font-size: 12px;
    color: hsla(0, 0%, 100%, 0.45);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.guide .bramble a:hover{
    color: var(--guide-primary);
    }
    main.guide .prism{
    color: var(--guide-primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
    transition: color 0.2s;
    }
    main.guide .prism:hover{
    color: var(--guide-text);
    }
    @media (max-width: 768px) {main.guide .ivory{
    padding: 56px 20px 48px;
    }
    main.guide .alchemy.jubilee{
    grid-template-columns: 1fr;
    }
    main.guide .mythos{
    height: 220px;
    }
    main.guide .husk{
    padding: 40px 0;
    }
    main.guide .flux{
    gap: 20px;
    }
    main.guide .thorn{
    grid-template-columns: 1fr 1fr;
    }
    main.guide .guide-toc-link{
    padding: 14px 14px;
    font-size: 12px;
    }}
    @media (max-width: 480px) {main.guide .thorn{
    grid-template-columns: 1fr;
    }
    main.guide .yield{
    gap: 14px;
    }
    main.guide .riddle{
    width: 40px;
    height: 40px;
    font-size: 16px;
    }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .crumble {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .duskMeld {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    gap: 32px;
    }
    
    .juniper {
    flex-shrink: 0;
    }
    .blotch {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--nav-text);
    }
    .lignite {
    color: var(--primary-color);
    }
    .galvanic {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: inherit;
    }
    
    .ember {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 4px;
    flex: 1;
    justify-content: center;
    }
    .myrrh {
    position: relative;
    }
    .gnaw {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 400;
    color: var(--nav-text-muted);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: var(--transition);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    }
    .gnaw:hover,
    .gnaw:focus-visible {
    color: var(--nav-text);
    }
    .orc {
    cursor: default;
    }
    .quilted {
    transition: transform 0.2s ease;
    opacity: 0.5;
    }
    
    .quasar {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    background: var(--nav-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-lg);
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    }
    .zephyr:hover .quasar,
    .zephyr:focus-within .quasar {
    opacity: 1;
    visibility: visible;
    }
    .zephyr:hover .quilted {
    transform: rotate(180deg);
    }
    .vortex3 {
    display: block;
    padding: 9px 20px;
    font-size: 13px;
    color: var(--nav-text-muted);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .vortex3:hover {
    color: var(--nav-text);
    background: rgba(255, 255, 255, 0.04);
    }
    
    .pixel_hum {
    flex-shrink: 0;
    }
    .dawnLit {
    display: inline-block;
    padding: 8px 22px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--text-color);
    background: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .dawnLit:hover {
    background: hsl(47, 70%, 44%);
    }
    .dawnLit:active {
    transform: scale(0.97);
    }
    
    .fizzPop {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    }
    .prong {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--nav-text);
    transition: var(--transition);
    }
    
    .sluice {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001; color: #ffffff;}
    .kv9 {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: var(--nav-bg);
    z-index: 1002;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    }
    .woven {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--nav-text);
    }
    .riptide {
    background: none;
    border: none;
    color: var(--nav-text);
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    }
    .ratchet {
    list-style: none;
    padding: 12px 0;
    }
    .tremolo {
    display: block;
    padding: 12px 24px;
    font-size: 14px;
    color: var(--nav-text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .tremolo:hover {
    color: var(--nav-text);
    }
    .saxo {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 12px 24px;
    font-size: 14px;
    font-family: inherit;
    color: var(--nav-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
    }
    .saxo:hover {
    color: var(--nav-text);
    }
    .fog_ray {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    }
    .bevel.is-open .fog_ray {
    max-height: 300px;
    }
    .bevel.is-open .quilted {
    transform: rotate(180deg);
    }
    .fog_ray .tremolo {
    padding-left: 40px;
    font-size: 13px;
    }
    .cobalt_fin {
    padding: 16px 20px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    .cask7 {
    display: block;
    text-align: center;
    width: 100%;
    }
    
    .nav-mobile-open .sluice {
    display: block;
    }
    .nav-mobile-open .kv9 {
    display: flex;
    transform: translateX(0);
    }
    
    @media (max-width: 860px) {.ember,
    .pixel_hum {
    display: none;
    }
    .fizzPop {
    display: flex;
    }}
    @media (min-width: 861px) {.sluice,
    .kv9 {
    display: none !important;
    }}
    .vortex3.active {color: var(--nav-text); background: rgba(255, 255, 255, 0.04);}
    .gnaw.active {color: var(--primary-color, #7c3aed); background: var(--border-color, rgba(0,0,0,0.08)); border-radius: var(--radius-sm, 8px);}
    .tremolo.active {color: var(--nav-text);}
    @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.tips *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    main.tips .nimbus{
    background-color: var(--tips-dark);
    color: #fff;
    padding: 100px 24px 80px;
    position: relative;
    overflow: hidden;
    }
    main.tips .nimbus::before{
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, hsla(47, 70%, 57%, 0.12) 0%, transparent 70%);
    pointer-events: none;
    }
    main.tips .loom{
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    }
    main.tips .quarry{
    font-family: "Noto Sans SC", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--tips-primary);
    margin-bottom: 24px;
    }
    main.tips .nimbus h1{
    font-family: "Noto Serif SC", serif;
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 24px;
    color: #fff;
    }
    main.tips .nimbus h1 span{
    color: var(--tips-primary);
    }
    main.tips .falcon{
    font-family: "Noto Sans SC", sans-serif;
    font-size: 17px;
    line-height: 1.8;
    color: hsla(0, 0%, 100%, 0.65);
    max-width: 640px;
    }
    main.tips .nomad{
    margin-top: 32px;
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    }
    main.tips .tundra{
    display: flex;
    flex-direction: column;
    gap: 4px;
    }
    main.tips .knot{
    font-family: "Noto Serif SC", serif;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    }
    main.tips .sapphire{
    font-family: "Noto Sans SC", sans-serif;
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.45);
    }
    main.tips .tips-toc{
    background: var(--tips-surface, #fff);
    border-bottom: 1px solid var(--tips-border);
    padding: 0 24px;
    position: sticky;
    top: 60px;
    z-index: 90;
    }
    main.tips .tips-toc-inner{
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    }
    main.tips .tips-toc-inner::-webkit-scrollbar{
    display: none;
    }
    main.tips .tips-toc-link{
    font-family: "Noto Sans SC", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--tips-text-muted);
    text-decoration: none;
    padding: 16px 20px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    }
    main.tips .tips-toc-link:hover{
    color: var(--tips-text);
    border-bottom-color: var(--tips-primary);
    }
    main.tips .frost{
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 24px;
    }
    main.tips .onyx{
    margin-bottom: 48px;
    }
    main.tips .onyx h2{
    font-family: "Noto Serif SC", serif;
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 700;
    color: var(--tips-text, #1a1a1a);
    margin-bottom: 12px;
    }
    main.tips .onyx p{
    font-family: "Noto Sans SC", sans-serif;
    font-size: 15px;
    color: var(--tips-text-muted);
    line-height: 1.7;
    max-width: 600px;
    }
    main.tips .velvet{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2px;
    background: var(--tips-border);
    }
    main.tips .abyss{
    background: var(--tips-surface, #fff);
    padding: 32px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    transition: background 0.2s;
    }
    main.tips .abyss:hover{
    background: var(--tips-bg);
    }
    main.tips .kindle{
    flex-shrink: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
    min-width: 110px;
    }
    main.tips .obsidian{
    font-family: "Noto Sans SC", monospace;
    font-size: 12px;
    font-weight: 600;
    background: var(--tips-code-bg);
    color: #fff;
    padding: 5px 10px;
    letter-spacing: 0.5px;
    }
    main.tips .whisper{
    font-size: 11px;
    color: var(--tips-text-muted);
    }
    main.tips .yonder h3{
    font-family: "Noto Sans SC", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--tips-text, #1a1a1a);
    margin-bottom: 6px;
    }
    main.tips .yonder p{
    font-family: "Noto Sans SC", sans-serif;
    font-size: 13px;
    color: var(--tips-text-muted);
    line-height: 1.6;
    }
    main.tips .tips-os-note{
    font-size: 11px;
    color: var(--tips-primary-dark);
    font-weight: 500;
    margin-top: 4px;
    display: inline-block;
    }
    main.tips .prism{
    border: none;
    border-top: 1px solid var(--tips-border);
    max-width: 1100px;
    margin: 0 auto;
    }
    main.tips .quartz{
    background: var(--tips-dark);
    color: #fff;
    }
    main.tips .quartz .onyx h2{
    color: #fff;
    }
    main.tips .quartz .onyx p{
    color: hsla(0, 0%, 100%, 0.55);
    }
    main.tips .drift{
    display: grid;
    gap: 24px;
    }
    main.tips .xenon{
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 20px;
    align-items: start;
    padding: 28px 0;
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.08);
    }
    main.tips .xenon:last-child{
    border-bottom: none;
    }
    main.tips .jewel{
    font-family: "Noto Serif SC", serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--tips-primary);
    line-height: 1;
    }
    main.tips .phantom h3{
    font-family: "Noto Sans SC", sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
    }
    main.tips .phantom p{
    font-family: "Noto Sans SC", sans-serif;
    font-size: 14px;
    color: hsla(0, 0%, 100%, 0.55);
    line-height: 1.7;
    }
    main.tips .glacier{
    display: inline-block;
    font-family: monospace;
    font-size: 13px;
    background: hsla(0, 0%, 100%, 0.08);
    color: var(--tips-accent);
    padding: 3px 10px;
    margin-top: 8px;
    }
    main.tips .marsh{
    padding: 0;
    }
    main.tips .elm{
    display: grid;
    grid-template-columns: 1fr 1fr;
    }
    main.tips .blaze{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 360px;
    }
    main.tips .cedar{
    padding: 60px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--tips-surface, #fff);
    }
    main.tips .cedar h2{
    font-family: "Noto Serif SC", serif;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 700;
    color: var(--tips-text, #1a1a1a);
    margin-bottom: 20px;
    }
    main.tips .cedar ul{
    list-style: none;
    display: grid;
    gap: 16px;
    }
    main.tips .cedar li{
    font-family: "Noto Sans SC", sans-serif;
    font-size: 14px;
    color: var(--tips-text-muted);
    line-height: 1.7;
    padding-left: 20px;
    position: relative;
    }
    main.tips .cedar li::before{
    content: "→";
    position: absolute;
    left: 0;
    color: var(--tips-primary);
    font-weight: 700;
    }
    main.tips .ripple{
    background: var(--tips-bg);
    }
    main.tips .tips-devtools-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    }
    main.tips .tips-devtool-card{
    background: var(--tips-surface, #fff);
    padding: 36px 28px;
    transition: transform 0.2s;
    }
    main.tips .tips-devtool-card:hover{
    transform: translateY(-2px);
    }
    main.tips .tips-devtool-icon{
    width: 40px;
    height: 40px;
    background: var(--tips-code-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 18px;
    }
    main.tips .tips-devtool-card h3{
    font-family: "Noto Sans SC", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--tips-text, #1a1a1a);
    margin-bottom: 10px;
    }
    main.tips .tips-devtool-card p{
    font-family: "Noto Sans SC", sans-serif;
    font-size: 13px;
    color: var(--tips-text-muted);
    line-height: 1.7;
    }
    main.tips .tips-devtool-shortcut{
    display: inline-block;
    font-family: monospace;
    font-size: 12px;
    background: var(--tips-code-bg);
    color: var(--tips-primary);
    padding: 3px 8px;
    margin-top: 12px;
    }
    main.tips .tips-memory{
    background: var(--tips-surface, #fff);
    }
    main.tips .tips-memory-list{
    display: grid;
    gap: 0;
    }
    main.tips .tips-memory-item{
    display: grid;
    grid-template-columns: 200px 1fr;
    border-bottom: 1px solid var(--tips-border);
    }
    main.tips .tips-memory-item:last-child{
    border-bottom: none;
    }
    main.tips .tips-memory-label{
    font-family: "Noto Sans SC", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--tips-text, #1a1a1a);
    padding: 24px 0;
    border-right: 1px solid var(--tips-border);
    padding-right: 24px;
    }
    main.tips .tips-memory-detail{
    padding: 24px;
    font-family: "Noto Sans SC", sans-serif;
    font-size: 14px;
    color: var(--tips-text-muted);
    line-height: 1.7;
    }
    main.tips .tips-memory-detail code{
    font-family: monospace;
    font-size: 13px;
    background: var(--tips-code-bg);
    color: var(--tips-primary);
    padding: 2px 8px;
    }
    main.tips .tips-cta-band{
    background: var(--tips-dark);
    padding: 64px 24px;
    text-align: center;
    }
    main.tips .tips-cta-band h2{
    font-family: "Noto Serif SC", serif;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    }
    main.tips .tips-cta-band p{
    font-family: "Noto Sans SC", sans-serif;
    font-size: 15px;
    color: hsla(0, 0%, 100%, 0.55);
    margin-bottom: 32px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
    }
    main.tips .tips-cta-btn{
    display: inline-block;
    font-family: "Noto Sans SC", sans-serif;
    font-size: 15px;
    font-weight: 600;
    background: var(--tips-primary);
    color: var(--tips-dark);
    padding: 14px 40px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    }
    main.tips .tips-cta-btn:hover{
    background: var(--tips-primary-dark);
    transform: translateY(-1px);
    }
    main.tips .vortex{
    background: var(--tips-code-bg);
    padding: 40px 24px;
    }
    main.tips .zinc{
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    }
    main.tips .tips-footer-brand{
    font-family: "Noto Serif SC", serif;
    font-size: 15px;
    font-weight: 700;
    color: hsla(0, 0%, 100%, 0.8);
    }
    main.tips .tide{
    font-family: "Noto Sans SC", sans-serif;
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.35);
    }
    main.tips .opal{
    display: flex;
    gap: 24px;
    }
    main.tips .opal a{
    font-family: "Noto Sans SC", sans-serif;
    font-size: 13px;
    color: hsla(0, 0%, 100%, 0.45);
    text-decoration: none;
    transition: color 0.2s;
    }
    main.tips .opal a:hover{
    color: var(--tips-primary);
    }
    @media (max-width: 768px) {main.tips .velvet{
    grid-template-columns: 1fr;
    }
    main.tips .abyss{
    flex-direction: column;
    gap: 12px;
    }
    main.tips .kindle{
    min-width: auto;
    }
    main.tips .elm{
    grid-template-columns: 1fr;
    }
    main.tips .blaze{
    min-height: 220px;
    }
    main.tips .cedar{
    padding: 40px 24px;
    }
    main.tips .tips-devtools-grid{
    grid-template-columns: 1fr;
    }
    main.tips .tips-memory-item{
    grid-template-columns: 1fr;
    }
    main.tips .tips-memory-label{
    border-right: none;
    border-bottom: 1px solid var(--tips-border);
    padding: 16px 0 8px;
    }
    main.tips .tips-memory-detail{
    padding: 8px 0 16px;
    }
    main.tips .tips-toc{
    top: 56px;
    }
    main.tips .nimbus{
    padding: 80px 24px 60px;
    }
    main.tips .frost{
    padding: 56px 24px;
    }
    main.tips .zinc{
    flex-direction: column;
    text-align: center;
    }}
    main.tips .vortex{
    background: var(--text-color, #1c1a15);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0;
    }
    main.tips .zinc{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    padding: 28px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    }
    main.tips .mirage{
    flex: 0 0 auto;
    }
    main.tips .tide{
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.01em;
    font-family: "Georgia", "Times New Roman", serif;
    }
    main.tips .opal{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    }
    main.tips .cobalt{
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    padding: 4px 6px;
    transition: var(--transition, all 0.2s ease);
    font-family: "Georgia", "Times New Roman", serif;
    }
    main.tips .cobalt:hover{
    color: var(--primary-color, hsl(47, 70%, 50%));
    }
    main.tips .marble{
    color: rgba(255, 255, 255, 0.2);
    font-size: 13px;
    user-select: none;
    }
    @media (max-width: 600px) {main.tips .zinc{
    flex-direction: column;
    gap: 14px;
    text-align: center;
    padding: 22px 16px;
    }
    main.tips .mirage{
    flex: 0 0 auto;
    }
    main.tips .opal{
    flex: 0 0 auto;
    justify-content: center;
    }}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .crumble {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .duskMeld {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    gap: 32px;
    }
    
    .juniper {
    flex-shrink: 0;
    }
    .blotch {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--nav-text);
    }
    .lignite {
    color: var(--primary-color);
    }
    .galvanic {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: inherit;
    }
    
    .ember {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 4px;
    flex: 1;
    justify-content: center;
    }
    .myrrh {
    position: relative;
    }
    .gnaw {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 400;
    color: var(--nav-text-muted);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: var(--transition);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    }
    .gnaw:hover,
    .gnaw:focus-visible {
    color: var(--nav-text);
    }
    .orc {
    cursor: default;
    }
    .quilted {
    transition: transform 0.2s ease;
    opacity: 0.5;
    }
    
    .quasar {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    background: var(--nav-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-lg);
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    }
    .zephyr:hover .quasar,
    .zephyr:focus-within .quasar {
    opacity: 1;
    visibility: visible;
    }
    .zephyr:hover .quilted {
    transform: rotate(180deg);
    }
    .vortex3 {
    display: block;
    padding: 9px 20px;
    font-size: 13px;
    color: var(--nav-text-muted);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .vortex3:hover {
    color: var(--nav-text);
    background: rgba(255, 255, 255, 0.04);
    }
    
    .pixel_hum {
    flex-shrink: 0;
    }
    .dawnLit {
    display: inline-block;
    padding: 8px 22px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--text-color);
    background: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .dawnLit:hover {
    background: hsl(47, 70%, 44%);
    }
    .dawnLit:active {
    transform: scale(0.97);
    }
    
    .fizzPop {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    }
    .prong {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--nav-text);
    transition: var(--transition);
    }
    
    .sluice {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001; color: #ffffff;}
    .kv9 {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: var(--nav-bg);
    z-index: 1002;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    }
    .woven {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--nav-text);
    }
    .riptide {
    background: none;
    border: none;
    color: var(--nav-text);
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    }
    .ratchet {
    list-style: none;
    padding: 12px 0;
    }
    .tremolo {
    display: block;
    padding: 12px 24px;
    font-size: 14px;
    color: var(--nav-text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .tremolo:hover {
    color: var(--nav-text);
    }
    .saxo {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 12px 24px;
    font-size: 14px;
    font-family: inherit;
    color: var(--nav-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
    }
    .saxo:hover {
    color: var(--nav-text);
    }
    .fog_ray {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    }
    .bevel.is-open .fog_ray {
    max-height: 300px;
    }
    .bevel.is-open .quilted {
    transform: rotate(180deg);
    }
    .fog_ray .tremolo {
    padding-left: 40px;
    font-size: 13px;
    }
    .cobalt_fin {
    padding: 16px 20px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    .cask7 {
    display: block;
    text-align: center;
    width: 100%;
    }
    
    .nav-mobile-open .sluice {
    display: block;
    }
    .nav-mobile-open .kv9 {
    display: flex;
    transform: translateX(0);
    }
    
    @media (max-width: 860px) {.ember,
    .pixel_hum {
    display: none;
    }
    .fizzPop {
    display: flex;
    }}
    @media (min-width: 861px) {.sluice,
    .kv9 {
    display: none !important;
    }}
    .vortex3.active {color: var(--nav-text); background: rgba(255, 255, 255, 0.04);}
    .gnaw.active {color: var(--primary-color, #7c3aed); background: var(--border-color, rgba(0,0,0,0.08)); border-radius: var(--radius-sm, 8px);}
    .tremolo.active {color: var(--nav-text);}
    main.system-requirements *, main.system-requirements *::before, main.system-requirements *::after{box-sizing:border-box;margin:0;padding:0}
    main.system-requirements .cinder{position:relative;width:100%;min-height:420px;overflow:hidden;display:flex;align-items:center;justify-content:center}
    main.system-requirements .crimson{position:absolute;inset:0;background:url("images/system-requirements-preview-1.jpg") center/cover no-repeat;filter:brightness(0.25)}
    main.system-requirements .ridgeline{position:relative;z-index:2;max-width:860px;padding:80px 24px 64px;text-align:center}
    main.system-requirements .ridgeline h1{font-family:"Georgia",serif;font-size:clamp(1.75rem,4vw,2.75rem);color:#fff;line-height:1.35;font-weight:700;letter-spacing:-0.02em;margin-bottom:16px}
    main.system-requirements .echo{font-size:1.05rem;color:hsla(0,0%,100%,0.72);line-height:1.6;max-width:640px;margin:0 auto}
    main.system-requirements .glyph{max-width:1080px;margin:0 auto;padding:64px 24px}
    main.system-requirements .fern{background:var(--background-color,hsl(47,7%,95%))}
    main.system-requirements .summit{font-size:1rem;line-height:1.75;color:var(--text-color,hsl(47,10%,12%));max-width:720px;margin:0 auto 48px;text-align:center}
    main.system-requirements .summit a{color:hsl(47,70%,42%);text-decoration:underline;text-underline-offset:3px}
    main.system-requirements .summit a:hover{color:hsl(47,70%,32%)}
    main.system-requirements .inlet{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
    main.system-requirements .zenith{background:#fff;border:1px solid hsl(47,7%,88%);padding:0;overflow:hidden;display:flex;flex-direction:column}
    main.system-requirements .jade{padding:20px 24px;background:hsl(47,10%,12%);display:flex;align-items:center;gap:14px; color: #ffffff;}
    main.system-requirements .dusk{width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    main.system-requirements .dusk svg{width:28px;height:28px;fill:none;stroke:hsl(47,70%,57%);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
    main.system-requirements .jolt{font-family:"Georgia",serif;font-size:1.15rem;color:#fff;font-weight:700;letter-spacing:-0.01em}
    main.system-requirements .timber{padding:24px;flex:1}
    main.system-requirements .grove{width:100%;border-collapse:collapse;font-size:0.9rem;color:var(--text-color,hsl(47,10%,12%))}
    main.system-requirements .grove tr{border-bottom:1px solid hsl(47,7%,90%)}
    main.system-requirements .grove tr:last-child{border-bottom:none}
    main.system-requirements .grove td{padding:10px 0;vertical-align:top;line-height:1.55}
    main.system-requirements .grove td:first-child{font-weight:600;width:110px;white-space:nowrap;padding-right:16px;color:hsl(47,10%,25%)}
    main.system-requirements .umbra{display:inline-block;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;padding:3px 8px;background:hsl(47,70%,57%);color:hsl(47,10%,12%);margin-left:8px;vertical-align:middle}
    main.system-requirements .pulse{max-width:1080px;margin:0 auto;padding:0 24px 64px}
    main.system-requirements .pulse h2{font-family:"Georgia",serif;font-size:clamp(1.3rem,3vw,1.75rem);color:var(--text-color,hsl(47,10%,12%));margin-bottom:32px;text-align:center;letter-spacing:-0.02em}
    main.system-requirements .kelp{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
    main.system-requirements .basalt{background:hsl(47,10%,12%);padding:28px 24px;text-align:center; color: #ffffff;}
    main.system-requirements .aurora{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:hsl(47,70%,57%);margin-bottom:10px;font-weight:700}
    main.system-requirements .vapor{font-family:"Georgia",serif;font-size:1.5rem;color:#fff;font-weight:700;line-height:1.3;margin-bottom:6px}
    main.system-requirements .flint{font-size:0.82rem;color:hsla(0,0%,100%,0.55);line-height:1.5}
    main.system-requirements .husk{max-width:1080px;margin:0 auto;padding:0 24px 64px}
    main.system-requirements .husk h2{font-family:"Georgia",serif;font-size:clamp(1.2rem,2.5vw,1.5rem);color:var(--text-color,hsl(47,10%,12%));margin-bottom:20px;letter-spacing:-0.01em}
    main.system-requirements .husk ul{list-style:none;padding:0}
    main.system-requirements .husk li{position:relative;padding:8px 0 8px 20px;font-size:0.9rem;line-height:1.65;color:hsl(47,10%,30%);border-bottom:1px solid hsl(47,7%,90%)}
    main.system-requirements .husk li:last-child{border-bottom:none}
    main.system-requirements .husk li::before{content:"";position:absolute;left:0;top:17px;width:8px;height:8px;background:hsl(47,70%,57%)}
    main.system-requirements .nectar{text-align:center;padding:48px 24px 0}
    main.system-requirements .ivory{display:inline-block;padding:16px 48px;background:hsl(47,70%,57%);color:hsl(47,10%,12%);font-size:1rem;font-weight:700;text-decoration:none;letter-spacing:0.02em;transition:background 0.2s}
    main.system-requirements .ivory:hover{background:hsl(47,70%,47%)}
    main.system-requirements .apex{text-align:center;padding:24px;font-size:0.8rem;color:hsl(47,10%,55%)}
    main.system-requirements .bloom{background:hsl(47,10%,12%);padding:40px 24px;text-align:center;margin-top:64px; color: #ffffff;}
    main.system-requirements .lumen{font-family:"Georgia",serif;font-size:1.1rem;color:#fff;font-weight:700;margin-bottom:6px}
    main.system-requirements .wren{font-size:0.82rem;color:hsla(0,0%,100%,0.45);margin-bottom:20px}
    main.system-requirements .haze{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-bottom:20px}
    main.system-requirements .haze a{font-size:0.82rem;color:hsla(0,0%,100%,0.6);text-decoration:none;transition:color 0.2s}
    main.system-requirements .haze a:hover{color:hsl(47,70%,57%)}
    main.system-requirements .mosaic{font-size:0.78rem;color:hsla(0,0%,100%,0.35%)}
    @media(max-width:640px){main.system-requirements .cinder{min-height:340px}
    main.system-requirements .ridgeline{padding:64px 20px 48px}
    main.system-requirements .inlet{grid-template-columns:1fr}
    main.system-requirements .kelp{grid-template-columns:repeat(2,1fr)}
    main.system-requirements .glyph{padding:48px 16px}
    main.system-requirements .pulse{padding:0 16px 48px}
    main.system-requirements .husk{padding:0 16px 48px}}
    @media(max-width:420px){main.system-requirements .kelp{grid-template-columns:1fr}}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .crumble {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .duskMeld {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    gap: 32px;
    }
    
    .juniper {
    flex-shrink: 0;
    }
    .blotch {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--nav-text);
    }
    .lignite {
    color: var(--primary-color);
    }
    .galvanic {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: inherit;
    }
    
    .ember {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 4px;
    flex: 1;
    justify-content: center;
    }
    .myrrh {
    position: relative;
    }
    .gnaw {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 400;
    color: var(--nav-text-muted);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: var(--transition);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    }
    .gnaw:hover,
    .gnaw:focus-visible {
    color: var(--nav-text);
    }
    .orc {
    cursor: default;
    }
    .quilted {
    transition: transform 0.2s ease;
    opacity: 0.5;
    }
    
    .quasar {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    background: var(--nav-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-lg);
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    }
    .zephyr:hover .quasar,
    .zephyr:focus-within .quasar {
    opacity: 1;
    visibility: visible;
    }
    .zephyr:hover .quilted {
    transform: rotate(180deg);
    }
    .vortex3 {
    display: block;
    padding: 9px 20px;
    font-size: 13px;
    color: var(--nav-text-muted);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .vortex3:hover {
    color: var(--nav-text);
    background: rgba(255, 255, 255, 0.04);
    }
    
    .pixel_hum {
    flex-shrink: 0;
    }
    .dawnLit {
    display: inline-block;
    padding: 8px 22px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--text-color);
    background: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .dawnLit:hover {
    background: hsl(47, 70%, 44%);
    }
    .dawnLit:active {
    transform: scale(0.97);
    }
    
    .fizzPop {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    }
    .prong {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--nav-text);
    transition: var(--transition);
    }
    
    .sluice {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001; color: #ffffff;}
    .kv9 {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: var(--nav-bg);
    z-index: 1002;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    }
    .woven {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--nav-text);
    }
    .riptide {
    background: none;
    border: none;
    color: var(--nav-text);
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    }
    .ratchet {
    list-style: none;
    padding: 12px 0;
    }
    .tremolo {
    display: block;
    padding: 12px 24px;
    font-size: 14px;
    color: var(--nav-text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .tremolo:hover {
    color: var(--nav-text);
    }
    .saxo {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 12px 24px;
    font-size: 14px;
    font-family: inherit;
    color: var(--nav-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
    }
    .saxo:hover {
    color: var(--nav-text);
    }
    .fog_ray {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    }
    .bevel.is-open .fog_ray {
    max-height: 300px;
    }
    .bevel.is-open .quilted {
    transform: rotate(180deg);
    }
    .fog_ray .tremolo {
    padding-left: 40px;
    font-size: 13px;
    }
    .cobalt_fin {
    padding: 16px 20px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    .cask7 {
    display: block;
    text-align: center;
    width: 100%;
    }
    
    .nav-mobile-open .sluice {
    display: block;
    }
    .nav-mobile-open .kv9 {
    display: flex;
    transform: translateX(0);
    }
    
    @media (max-width: 860px) {.ember,
    .pixel_hum {
    display: none;
    }
    .fizzPop {
    display: flex;
    }}
    @media (min-width: 861px) {.sluice,
    .kv9 {
    display: none !important;
    }}
    .vortex3.active {color: var(--nav-text); background: rgba(255, 255, 255, 0.04);}
    .gnaw.active {color: var(--primary-color, #7c3aed); background: var(--border-color, rgba(0,0,0,0.08)); border-radius: var(--radius-sm, 8px);}
    .tremolo.active {color: var(--nav-text);}
    main.changelog *, main.changelog *::before, main.changelog *::after{box-sizing:border-box;margin:0;padding:0}
    main.changelog .forge{position:relative;overflow:hidden;background:#1a1a1a;padding:96px 24px 72px; color: #ffffff;}
    main.changelog .mirth{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18;pointer-events:none}
    main.changelog .urchin{position:relative;max-width:800px;margin:0 auto;z-index:1}
    main.changelog .forge h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(28px,4.5vw,48px);color:#f0ece4;line-height:1.25;letter-spacing:-.02em;margin-bottom:20px}
    main.changelog .forge h1 span{color:hsl(47,70%,57%)}
    main.changelog .vale{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:17px;line-height:1.7;color:#b0aca4;max-width:640px}
    main.changelog .oxide{background:#f1f0ec;border-bottom:1px solid #ddd}
    main.changelog .pyre{max-width:960px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
    main.changelog .kite{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:13px;color:#666;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
    main.changelog .isle{display:flex;gap:8px;flex-wrap:wrap}
    main.changelog .nova{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:13px;padding:5px 14px;border:1px solid #ccc;background:transparent;color:#555;cursor:pointer;transition:all .2s}
    main.changelog .nova:hover, main.changelog .nova.phantom{background:#1a1a1a;color:#f0ece4;border-color:#1a1a1a}
    main.changelog .alloy{max-width:960px;margin:0 auto;padding:64px 24px}
    main.changelog .helm{margin-bottom:56px;display:grid;grid-template-columns:200px 1fr;gap:0}
    main.changelog .dune{padding-right:32px;border-right:2px solid #e0ddd6;position:relative}
    main.changelog .dune::before{content:"";position:absolute;right:-7px;top:0;width:12px;height:12px;background:hsl(47,70%,57%);border-radius:0}
    main.changelog .mote{font-family:Georgia,"Times New Roman",serif;font-size:28px;color:hsl(47,10%,12%);font-weight:700;line-height:1.2}
    main.changelog .wisp{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:13px;color:#888;margin-top:6px;letter-spacing:.02em}
    main.changelog .rune{display:inline-block;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:.1em;padding:3px 10px;margin-top:10px;font-weight:600}
    main.changelog .latch{background:hsl(117,56%,57%);color:#1a1a1a}
    main.changelog .cl-channel-beta{background:hsl(47,70%,57%);color:#1a1a1a}
    main.changelog .crux{padding-left:32px}
    main.changelog .etch{font-family:Georgia,"Times New Roman",serif;font-size:20px;color:hsl(47,10%,12%);margin-bottom:16px;line-height:1.3}
    main.changelog .grain{margin-bottom:24px}
    main.changelog .grain h3{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#888;margin-bottom:10px;font-weight:600}
    main.changelog .xeno{list-style:none;padding:0}
    main.changelog .xeno li{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.65;color:hsl(47,10%,12%);padding:4px 0 4px 20px;position:relative}
    main.changelog .xeno li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:2px;background:hsl(47,70%,57%)}
    main.changelog .junco{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;padding:2px 8px;margin-left:8px;font-weight:600;vertical-align:middle}
    main.changelog .orbit{background:#1a1a1a;color:#f0ece4}
    main.changelog .brine{background:#e8e6e0;color:#555}
    main.changelog .plume{background:hsl(0,60%,50%);color:#fff}
    main.changelog .thorn{background:hsl(117,56%,57%);color:#1a1a1a}
    main.changelog .quill{background:#1a1a1a;padding:64px 24px;text-align:center; color: #ffffff;}
    main.changelog .quill h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(24px,3.5vw,36px);color:#f0ece4;margin-bottom:12px}
    main.changelog .quill p{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:16px;color:#888;margin-bottom:32px;max-width:480px;margin-left:auto;margin-right:auto;line-height:1.6}
    main.changelog .shard{display:inline-block;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:15px;font-weight:600;padding:14px 40px;background:hsl(47,70%,57%);color:#1a1a1a;text-decoration:none;letter-spacing:.02em;transition:background .2s}
    main.changelog .shard:hover{background:hsl(47,70%,50%)}
    main.changelog .yarn{background:#111;padding:40px 24px;text-align:center; color: #ffffff;}
    main.changelog .lattice{font-family:Georgia,"Times New Roman",serif;font-size:18px;color:#f0ece4;margin-bottom:8px}
    main.changelog .knoll{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:13px;color:#666}
    main.changelog .nook{margin-top:16px;display:flex;justify-content:center;gap:24px}
    main.changelog .nook a{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:13px;color:#888;text-decoration:none;transition:color .2s}
    main.changelog .nook a:hover{color:#f0ece4}
    @media(max-width:720px){main.changelog .helm{grid-template-columns:1fr;gap:16px}
    main.changelog .dune{border-right:none;border-bottom:2px solid #e0ddd6;padding-right:0;padding-bottom:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
    main.changelog .dune::before{display:none}
    main.changelog .crux{padding-left:0}
    main.changelog .forge{padding:72px 20px 56px}
    main.changelog .alloy{padding:40px 20px}}

    *,
    *::before,
    *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    padding-top: var(--nav-height);
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
    background: var(--bg-color);
    color: var(--text-color);
    }
    
    .crumble {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .duskMeld {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    gap: 32px;
    }
    
    .juniper {
    flex-shrink: 0;
    }
    .blotch {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--nav-text);
    }
    .lignite {
    color: var(--primary-color);
    }
    .galvanic {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: inherit;
    }
    
    .ember {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 4px;
    flex: 1;
    justify-content: center;
    }
    .myrrh {
    position: relative;
    }
    .gnaw {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 400;
    color: var(--nav-text-muted);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: var(--transition);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    }
    .gnaw:hover,
    .gnaw:focus-visible {
    color: var(--nav-text);
    }
    .orc {
    cursor: default;
    }
    .quilted {
    transition: transform 0.2s ease;
    opacity: 0.5;
    }
    
    .quasar {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    background: var(--nav-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-lg);
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    }
    .zephyr:hover .quasar,
    .zephyr:focus-within .quasar {
    opacity: 1;
    visibility: visible;
    }
    .zephyr:hover .quilted {
    transform: rotate(180deg);
    }
    .vortex3 {
    display: block;
    padding: 9px 20px;
    font-size: 13px;
    color: var(--nav-text-muted);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .vortex3:hover {
    color: var(--nav-text);
    background: rgba(255, 255, 255, 0.04);
    }
    
    .pixel_hum {
    flex-shrink: 0;
    }
    .dawnLit {
    display: inline-block;
    padding: 8px 22px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--text-color);
    background: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    }
    .dawnLit:hover {
    background: hsl(47, 70%, 44%);
    }
    .dawnLit:active {
    transform: scale(0.97);
    }
    
    .fizzPop {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px 6px;
    background: none;
    border: none;
    cursor: pointer;
    }
    .prong {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--nav-text);
    transition: var(--transition);
    }
    
    .sluice {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001; color: #ffffff;}
    .kv9 {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: var(--nav-bg);
    z-index: 1002;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    }
    .woven {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--nav-text);
    }
    .riptide {
    background: none;
    border: none;
    color: var(--nav-text);
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    }
    .ratchet {
    list-style: none;
    padding: 12px 0;
    }
    .tremolo {
    display: block;
    padding: 12px 24px;
    font-size: 14px;
    color: var(--nav-text-muted);
    text-decoration: none;
    transition: var(--transition);
    }
    .tremolo:hover {
    color: var(--nav-text);
    }
    .saxo {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 12px 24px;
    font-size: 14px;
    font-family: inherit;
    color: var(--nav-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
    }
    .saxo:hover {
    color: var(--nav-text);
    }
    .fog_ray {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    }
    .bevel.is-open .fog_ray {
    max-height: 300px;
    }
    .bevel.is-open .quilted {
    transform: rotate(180deg);
    }
    .fog_ray .tremolo {
    padding-left: 40px;
    font-size: 13px;
    }
    .cobalt_fin {
    padding: 16px 20px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    .cask7 {
    display: block;
    text-align: center;
    width: 100%;
    }
    
    .nav-mobile-open .sluice {
    display: block;
    }
    .nav-mobile-open .kv9 {
    display: flex;
    transform: translateX(0);
    }
    
    @media (max-width: 860px) {.ember,
    .pixel_hum {
    display: none;
    }
    .fizzPop {
    display: flex;
    }}
    @media (min-width: 861px) {.sluice,
    .kv9 {
    display: none !important;
    }}
    .vortex3.active {color: var(--nav-text); background: rgba(255, 255, 255, 0.04);}
    .gnaw.active {color: var(--primary-color, #7c3aed); background: var(--border-color, rgba(0,0,0,0.08)); border-radius: var(--radius-sm, 8px);}
    .tremolo.active {color: var(--nav-text);}
    main.faq *, main.faq *::before, main.faq *::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    main.faq .bolt{
    position: relative;
    overflow: hidden;
    padding: 80px 24px 64px;
    background: hsl(47, 10%, 8%);
    color: hsl(47, 7%, 95%);
    }
    main.faq .bolt::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, hsla(47, 70%, 57%, 0.08) 0%, transparent 60%);
    pointer-events: none;
    }
    main.faq .loom{
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    }
    main.faq .bolt h1{
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    color: hsl(47, 7%, 98%);
    }
    main.faq .bolt h1 span{
    color: hsl(47, 70%, 57%);
    }
    main.faq .opal{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: hsl(47, 7%, 68%);
    max-width: 640px;
    }
    main.faq .cirrus{
    background: hsl(47, 7%, 95%);
    padding: 40px 24px;
    border-bottom: 1px solid hsl(47, 7%, 88%);
    }
    main.faq .raven{
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    }
    main.faq .flint{
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-color, hsl(47, 10%, 12%));
    margin-bottom: 16px;
    }
    main.faq .cobalt{
    display: flex;
    gap: 0;
    width: 100%;
    }
    main.faq .cobalt input{
    flex: 1;
    padding: 14px 18px;
    font-size: 0.95rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    border: 2px solid hsl(47, 7%, 80%);
    border-right: none;
    background: hsl(47, 7%, 100%);
    color: var(--text-color, hsl(47, 10%, 12%));
    outline: none;
    transition: border-color 0.2s;
    }
    main.faq .cobalt input:focus{
    border-color: hsl(47, 70%, 57%);
    }
    main.faq .cobalt button{
    padding: 14px 24px;
    font-size: 0.95rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 600;
    background: hsl(47, 70%, 57%);
    color: hsl(47, 10%, 8%);
    border: 2px solid hsl(47, 70%, 57%);
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
    }
    main.faq .cobalt button:hover{
    background: hsl(47, 70%, 50%);
    border-color: hsl(47, 70%, 50%);
    }
    main.faq .drift{
    background: hsl(47, 7%, 95%);
    padding: 48px 24px 8px;
    }
    main.faq .glacier{
    max-width: 800px;
    margin: 0 auto;
    }
    main.faq .drift h2{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-color, hsl(47, 10%, 12%));
    margin-bottom: 20px;
    letter-spacing: -0.01em;
    }
    main.faq .haze{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
    margin-bottom: 40px;
    }
    main.faq .nebula{
    padding: 10px 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-color, hsl(47, 10%, 12%));
    background: hsl(47, 7%, 100%);
    border: 1px solid hsl(47, 7%, 85%);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    }
    main.faq .nebula:hover, main.faq .nebula.ridge{
    background: hsl(47, 10%, 8%);
    color: hsl(47, 7%, 98%);
    border-color: hsl(47, 10%, 8%);
    }
    main.faq .falcon{
    background: hsl(47, 7%, 95%);
    padding: 0 24px 64px;
    }
    main.faq .nimbus{
    max-width: 800px;
    margin: 0 auto;
    }
    main.faq .surge{
    margin-bottom: 48px;
    }
    main.faq .surge h2{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-color, hsl(47, 10%, 12%));
    padding-bottom: 12px;
    border-bottom: 2px solid hsl(47, 70%, 57%);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
    }
    main.faq .wren{
    border-bottom: 1px solid hsl(47, 7%, 85%);
    }
    main.faq .wren summary{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-color, hsl(47, 10%, 12%));
    cursor: pointer;
    list-style: none;
    line-height: 1.5;
    transition: color 0.15s;
    }
    main.faq .wren summary::-webkit-details-marker{
    display: none;
    }
    main.faq .wren summary::after{
    content: "+";
    font-size: 1.3rem;
    font-weight: 300;
    color: hsl(47, 7%, 55%);
    flex-shrink: 0;
    margin-left: 16px;
    transition: transform 0.2s;
    }
    main.faq .wren[open] summary::after{
    content: "−";
    }
    main.faq .wren summary:hover{
    color: hsl(47, 70%, 42%);
    }
    main.faq .alder{
    padding: 0 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.92rem;
    line-height: 1.8;
    color: hsl(47, 7%, 35%);
    }
    main.faq .alder p{
    margin-bottom: 10px;
    }
    main.faq .alder p:last-child{
    margin-bottom: 0;
    }
    main.faq .alder ol, main.faq .alder ul{
    padding-left: 20px;
    margin-bottom: 10px;
    }
    main.faq .alder li{
    margin-bottom: 4px;
    }
    main.faq .alder code{
    font-family: "SF Mono", "Fira Code", monospace;
    font-size: 0.85em;
    background: hsl(47, 7%, 88%);
    padding: 2px 6px;
    color: hsl(47, 10%, 18%);
    }
    main.faq .alder a{
    color: hsl(47, 70%, 42%);
    text-decoration: underline;
    text-underline-offset: 2px;
    }
    main.faq .alder a:hover{
    color: hsl(47, 70%, 32%);
    }
    main.faq .faq-visual{
    background: hsl(47, 7%, 95%);
    padding: 0 24px 64px;
    }
    main.faq .faq-visual-inner{
    max-width: 800px;
    margin: 0 auto;
    }
    main.faq .faq-visual-img{
    width: 100%;
    display: block;
    border: 1px solid hsl(47, 7%, 85%);
    filter: grayscale(10%);
    }
    main.faq .faq-visual-caption{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.8rem;
    color: hsl(47, 7%, 55%);
    margin-top: 8px;
    text-align: right;
    }
    main.faq .faq-cta{
    background: hsl(47, 10%, 8%);
    padding: 64px 24px;
    text-align: center; color: #ffffff;}
    main.faq .faq-cta-inner{
    max-width: 560px;
    margin: 0 auto;
    }
    main.faq .faq-cta h2{
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.3rem, 3vw, 1.75rem);
    font-weight: 700;
    color: hsl(47, 7%, 98%);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    }
    main.faq .faq-cta p{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.95rem;
    color: hsl(47, 7%, 62%);
    line-height: 1.6;
    margin-bottom: 28px;
    }
    main.faq .faq-cta-btn{
    display: inline-block;
    padding: 15px 40px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    background: hsl(47, 70%, 57%);
    color: hsl(47, 10%, 8%);
    transition: background 0.2s, transform 0.1s;
    letter-spacing: 0.02em;
    }
    main.faq .faq-cta-btn:hover{
    background: hsl(47, 70%, 50%);
    transform: translateY(-1px);
    }
    main.faq .cedar{
    background: hsl(47, 10%, 6%);
    padding: 40px 24px;
    border-top: 1px solid hsl(47, 7%, 18%); color: #ffffff;}
    main.faq .crest{
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    }
    main.faq .glyph{
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: hsl(47, 7%, 75%);
    }
    main.faq .glyph small{
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    color: hsl(47, 7%, 45%);
    margin-top: 4px;
    }
    main.faq .prism{
    display: flex;
    gap: 20px;
    list-style: none;
    }
    main.faq .prism a{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.8rem;
    color: hsl(47, 7%, 50%);
    text-decoration: none;
    transition: color 0.15s;
    }
    main.faq .prism a:hover{
    color: hsl(47, 70%, 57%);
    }
    main.faq .faq-footer-copy{
    width: 100%;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.75rem;
    color: hsl(47, 7%, 38%);
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid hsl(47, 7%, 15%);
    }
    main.faq .ivory{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.78rem;
    color: hsl(47, 7%, 55%);
    margin-top: 6px;
    text-align: right;
    }
    @media (max-width: 600px) {main.faq .bolt{
    padding: 56px 18px 44px;
    }
    main.faq .haze{
    grid-template-columns: repeat(2, 1fr);
    }
    main.faq .crest{
    flex-direction: column;
    text-align: center;
    }
    main.faq .prism{
    justify-content: center;
    }
    main.faq .cobalt{
    flex-direction: column;
    }
    main.faq .cobalt input{
    border-right: 2px solid hsl(47, 7%, 80%);
    border-bottom: none;
    }
    main.faq .cobalt input:focus{
    border-color: hsl(47, 70%, 57%);
    }}
    main.faq .cedar{
    background-color: var(--text-color, #1c1b17);
    color: var(--bg-color, #f2f1ef);
    padding: 0;
    font-family: "Georgia", "Noto Serif SC", serif;
    }
    main.faq .crest{
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    padding: 48px 24px 32px;
    }
    main.faq .basalt{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    main.faq .glyph{
    flex: 0 0 auto;
    }
    main.faq .apex{
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    display: block;
    font-family: "Georgia", "Noto Serif SC", serif;
    }
    main.faq .jade{
    margin: 6px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.4;
    }
    main.faq .prism{
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1 1 auto;
    justify-content: center;
    flex-wrap: wrap;
    }
    main.faq .vortex{
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 13px;
    padding: 4px 16px;
    transition: var(--transition, all 0.2s ease);
    white-space: nowrap;
    }
    main.faq .vortex:hover{
    color: var(--primary-color, hsl(47, 70%, 50%));
    }
    main.faq .husk{
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.15);
    flex: 0 0 1px;
    }
    main.faq .pike{
    flex: 0 0 auto;
    }
    main.faq .quartz{
    display: inline-block;
    background: var(--primary-color, hsl(47, 70%, 50%));
    color: #000;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 28px;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: var(--transition, all 0.2s ease);
    font-family: "Georgia", "Noto Serif SC", serif;
    }
    main.faq .quartz:hover{
    background: hsl(47, 70%, 44%);
    box-shadow: 0 4px 20px rgba(202, 175, 60, 0.3);
    }
    main.faq .zinc{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    }
    main.faq .dusk{
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    flex: 0 0 auto;
    }
    main.faq .moss{
    font-size: 12px;
    color: rgba(255, 255, 255, 0.25);
    flex: 0 0 auto;
    }
    @media (max-width: 768px) {main.faq .crest{
    padding: 36px 20px 24px;
    }
    main.faq .basalt{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    }
    main.faq .glyph{
    order: 0;
    }
    main.faq .prism{
    justify-content: center;
    gap: 4px;
    }
    main.faq .vortex{
    padding: 4px 12px;
    }
    main.faq .pike{
    width: 100%;
    text-align: center;
    }
    main.faq .quartz{
    width: 100%;
    text-align: center;
    padding: 12px 28px;
    }
    main.faq .zinc{
    flex-direction: column;
    gap: 4px;
    align-items: center;
    }}

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