#site-root {
      --jh-bg: light-dark(#edf0f1,#070b10); --jh-surface: light-dark(#f6f8f8,#0e151e);
      --jh-ink: light-dark(#1b303b,#e8eff4); --jh-soft: light-dark(#526a79,#91a3b3);
      --jh-line: light-dark(#cbd5dd,#263340); --jh-accent: light-dark(#007b87,#7bd6de);
      --jh-tint: light-dark(#dce9e9,#17282f); --jh-purple: light-dark(#7554ad,#ad97dd);
      --jh-warm: light-dark(#ad6e29,#dfb879);
      background: var(--jh-bg); color: var(--jh-ink); font-family: "Segoe UI","Microsoft YaHei",sans-serif; font-size: 14px;
      width: 100%; overflow: clip; isolation: isolate; text-align: left;
    }
    #site-root * { box-sizing: border-box; }
    #site-root button,#site-root input,#site-root textarea { font: inherit; }
    #site-root button,#site-root a { -webkit-tap-highlight-color: transparent; }
    #site-root a { color: inherit; text-decoration: none; }
    #site-root [hidden] { display: none !important; }
    #site-root .jh-header { min-height: 76px; padding: 12px 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--jh-line); background: var(--jh-bg); }
    #site-root .jh-brand { display: flex; align-items: center; gap: 13px; background: none; border: 0; padding: 0; color: var(--jh-ink); min-height: 44px; }
    #site-root .jh-wordmark { font: 32px Georgia,serif; letter-spacing: -1px; }
    #site-root .jh-brand span:last-child { color: var(--jh-soft); font-size: 11px; letter-spacing: 2px; border-left: 1px solid var(--jh-line); padding-left: 13px; }
    #site-root .jh-nav { display: flex; flex-wrap: wrap; gap: 24px; padding-right: 80px; }
    #site-root .jh-nav button { position: relative; border: 0; background: none; padding: 9px 0; color: var(--jh-soft); font-size: 12px; min-height: 44px; white-space: nowrap; }
    #site-root .jh-nav button[aria-current] { color: var(--jh-ink); }
    #site-root .jh-nav button[aria-current]::after { content:""; position: absolute; bottom: 5px; left: 0; right: 0; height: 1px; background: var(--jh-accent); }
    #site-root .jh-nav button:hover { color: var(--jh-ink); }
    #site-root .jh-hero { position: relative; border-bottom: 1px solid var(--jh-line); }
    #site-root .jh-greeting { margin: 0; padding: 29px 36px 0; font-weight: 400; font-size: 17px; letter-spacing: 2px; }
    #site-root .jh-greeting span { color: var(--jh-soft); }
    #site-root .jn-scene { height: 626px; }
    #site-root .jn-top { height: 56px; margin: 0 36px; padding-right: 0; border-bottom: 0; }
    #site-root .jn-brand { display: none; }
    #site-root .jn-heading { border: 0; padding: 0; }
    #site-root .jn-heading h2 { font-size: 11px; color: var(--jh-soft); letter-spacing: 1px; }
    #site-root .jn-heading p { display: none; }
    #site-root .jn-workspace { height: 458px; margin: 0 32px; }
    #site-root .jn-bottom { height: 78px; margin: 0 36px; }
    #site-root .jn-foot { height: 34px; padding: 0 36px; }
    #site-root .jh-view-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 17px; padding: 15px 36px 22px; }
    #site-root .jh-view-group { display: flex; flex-wrap: wrap; gap: 5px; }
    #site-root .jh-view-group button { border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--jh-soft); padding: 11px 14px; font-size: 11px; min-height: 44px; }
    #site-root .jh-view-group button[aria-pressed="true"] { border-color: var(--jh-line); background: var(--jh-surface); color: var(--jh-ink); }
    #site-root .jh-view-group button:hover { color: var(--jh-ink); }
    #site-root .jh-scroll { display: flex; align-items: center; gap: 9px; border: 0; background: none; color: var(--jh-soft); font-size: 11px; padding: 10px 0; min-height: 44px; }
    #site-root .jh-content { max-width: 1060px; padding: 0 52px; margin: auto; }
    #site-root .jh-section { padding: 65px 0; border-bottom: 1px solid var(--jh-line); scroll-margin-top: 24px; }
    #site-root .jh-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 27px; }
    #site-root .jh-eyebrow { font: 11px ui-monospace,Consolas,monospace; color: var(--jh-soft); letter-spacing: 2px; margin: 0 0 10px; }
    #site-root .jh-section h2 { font-size: 27px; font-weight: 400; letter-spacing: 1px; margin: 0; }
    #site-root .jh-subtitle { color: var(--jh-soft); font-size: 12px; margin: 11px 0 0; line-height: 1.8; }
    #site-root .jh-small-label { color: var(--jh-soft); font-size: 11px; white-space: nowrap; }
    #site-root .jh-software-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
    #site-root .jh-software { min-width: 0; }
    #site-root .jh-app-picture { height: 234px; padding: 22px; background: var(--jh-surface); border: 1px solid var(--jh-line); border-radius: 7px; position: relative; overflow: hidden; }
    #site-root .jh-picture-caption { position: absolute; top: 11px; right: 12px; color: var(--jh-soft); font-size: 11px; }
    #site-root .jh-mini-app { margin-top: 13px; padding: 15px 16px; border: 1px solid var(--jh-line); border-radius: 5px; background: var(--jh-bg); transform: perspective(800px) rotateY(-7deg) rotateX(5deg); }
    #site-root .jh-app-title { font-size: 13px; display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
    #site-root .jh-app-title i { color: var(--jh-accent); }
    #site-root .jh-task { display: flex; align-items: center; gap: 8px; margin: 11px 0; font-size: 11px; color: var(--jh-soft); }
    #site-root .jh-task input { accent-color: var(--jh-accent); width: 13px; height: 13px; margin: 0; }
    #site-root .jh-task:has(input:checked) span { text-decoration: line-through; opacity: .6; }
    #site-root .jh-task-time { margin-left: auto; font: 11px ui-monospace,Consolas,monospace; color: var(--jh-soft); }
    #site-root .jh-software-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 0 9px; }
    #site-root .jh-software h3 { margin: 0; font-size: 18px; font-weight: 400; }
    #site-root .jh-tag { border: 1px solid var(--jh-line); border-radius: 3px; padding: 4px 6px; font-size: 11px; color: var(--jh-soft); }
    #site-root .jh-software p { color: var(--jh-soft); font-size: 12px; line-height: 1.9; margin: 0 0 12px; }
    #site-root .jh-link { display: inline-flex; align-items: center; gap: 9px; padding: 9px 0; min-height: 44px; color: var(--jh-ink); border: 0; background: none; font-size: 12px; }
    #site-root .jh-link:hover { color: var(--jh-accent); }
    #site-root .jh-music-picture { display: flex; justify-content: center; align-items: center; gap: 22px; }
    #site-root .jh-disc { width: 132px; height: 132px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--jh-line); display: grid; place-items: center; background: repeating-radial-gradient(circle at center,var(--jh-surface) 0px,var(--jh-surface) 3px,var(--jh-line) 4px,var(--jh-surface) 5px); }
    #site-root .jh-disc::after { content:"F"; font: 34px Georgia,serif; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--jh-tint); color: var(--jh-accent); border: 1px solid var(--jh-line); }
    #site-root .jh-music-info { min-width: 0; }
    #site-root .jh-music-info strong { font: 26px Georgia,serif; font-weight: 400; letter-spacing: 1px; }
    #site-root .jh-music-info small { display: block; color: var(--jh-soft); font-size: 11px; margin-top: 8px; }
    #site-root .jh-wave { display: flex; align-items: center; gap: 4px; height: 32px; margin-top: 18px; }
    #site-root .jh-wave span { width: 3px; background: var(--jh-accent); opacity: .65; border-radius: 2px; }
    #site-root .jh-wave span:nth-child(1),#site-root .jh-wave span:nth-child(7) { height: 9px; }
    #site-root .jh-wave span:nth-child(2),#site-root .jh-wave span:nth-child(6) { height: 20px; }
    #site-root .jh-wave span:nth-child(3),#site-root .jh-wave span:nth-child(5) { height: 14px; }
    #site-root .jh-wave span:nth-child(4) { height: 28px; }
    #site-root .jh-detail { padding: 20px 22px; margin-top: 25px; border-left: 2px solid var(--jh-accent); background: var(--jh-surface); }
    #site-root .jh-detail h3 { margin: 0 0 9px; font-size: 15px; font-weight: 500; }
    #site-root .jh-detail p { color: var(--jh-soft); font-size: 12px; line-height: 1.9; margin: 0; }
    #site-root .jh-community-preview { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 27px 0 0; }
    #site-root .jh-community-preview p { font-size: 13px; color: var(--jh-soft); margin: 0; line-height: 1.9; }
    #site-root .jh-community-preview strong { display: block; font-size: 16px; font-weight: 400; color: var(--jh-ink); margin-bottom: 8px; }
    #site-root .jh-button { min-height: 45px; padding: 12px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; flex-shrink: 0; border: 1px solid var(--jh-line); background: var(--jh-surface); color: var(--jh-ink); border-radius: 4px; font-size: 12px; }
    #site-root .jh-button:hover { border-color: var(--jh-accent); }
    #site-root .jh-about { display: flex; gap: 28px; align-items: flex-start; }
    #site-root .jh-avatar { width: 70px; height: 70px; flex-shrink: 0; border: 1px solid var(--jh-line); border-radius: 50%; display: grid; place-items: center; font: 25px Georgia,serif; background: var(--jh-surface); }
    #site-root .jh-about p { font-size: 13px; line-height: 2; color: var(--jh-soft); margin: 18px 0 15px; max-width: 580px; }
    #site-root .jh-interests { display: flex; flex-wrap: wrap; gap: 7px; }
    #site-root .jh-footer { min-height: 92px; padding: 24px 36px; display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--jh-soft); font: 11px ui-monospace,Consolas,monospace; }
    #site-root .jh-footer button { border: 0; background: none; color: var(--jh-soft); font-size: 11px; min-height: 44px; }
    #site-root .jh-community-page { padding: 52px 52px 70px; max-width: 900px; margin: auto; min-height: 800px; }
    #site-root .jh-community-page h1 { font-size: 30px; font-weight: 400; margin: 24px 0 14px; }
    #site-root .jh-community-page>p { color: var(--jh-soft); font-size: 13px; line-height: 1.9; }
    #site-root .jh-form { margin-top: 32px; padding: 24px; border: 1px solid var(--jh-line); border-radius: 5px; background: var(--jh-surface); }
    #site-root .jh-form label { display: block; font-size: 12px; color: var(--jh-soft); margin-bottom: 8px; }
    #site-root .jh-form input,#site-root .jh-form textarea { display: block; width: 100%; border: 1px solid var(--jh-line); border-radius: 3px; padding: 12px; background: var(--jh-bg); color: var(--jh-ink); font-size: 16px; margin: 0 0 20px; }
    #site-root .jh-form input { max-width: 300px; }
    #site-root .jh-form textarea { min-height: 126px; resize: vertical; line-height: 1.7; }
    #site-root .jh-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
    #site-root .jh-form-footer span { color: var(--jh-soft); font-size: 11px; }
    #site-root .jh-messages { margin-top: 35px; }
    #site-root .jh-message { padding: 22px 0; border-bottom: 1px solid var(--jh-line); }
    #site-root .jh-message strong { font-size: 13px; font-weight: 500; }
    #site-root .jh-message small { color: var(--jh-soft); font-size: 11px; margin-left: 12px; }
    #site-root .jh-message p { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--jh-soft); font-size: 13px; line-height: 1.9; }
    #site-root .jh-empty { color: var(--jh-soft); padding: 35px 0; text-align: center; font-size: 13px; }
    #site-root .jh-announcement { color: var(--jh-accent); min-height: 20px; font-size: 12px; }
    @media(max-width: 760px) {
      #site-root .jh-header { padding: 14px 22px; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
      #site-root .jh-nav { gap: 21px; padding-right: 0; }
      #site-root .jh-brand span:last-child { display: none; }
      #site-root .jh-content { padding: 0 28px; }
      #site-root .jh-greeting { padding-left: 25px; font-size: 15px; }
      #site-root .jh-view-controls { padding: 12px 22px 20px; gap: 5px; }
      #site-root .jh-view-group { gap: 0; }
      #site-root .jh-view-group button { padding: 11px 9px; }
      #site-root .jn-workspace,#site-root .jn-modules .jn-workspace { margin: 0 18px; }
      #site-root .jn-top { margin: 0 25px; }
      #site-root .jn-bottom { margin: 0 25px; }
      #site-root .jn-foot { padding: 0 25px; }
      #site-root .jh-app-picture { padding: 16px; }
      #site-root .jh-disc { width: 98px; height: 98px; }
      #site-root .jh-music-picture { gap: 14px; }
      #site-root .jh-music-info strong { font-size: 22px; }
    }
    @media(max-width: 540px) {
      #site-root .jh-header { display: block; padding-right: 100px; }
      #site-root .jh-nav { margin-top: 3px; gap: 19px; width: calc(100% + 70px); }
      #site-root .jh-nav button { font-size: 12px; }
      #site-root .jh-greeting { font-size: 14px; letter-spacing: 1px; }
      #site-root .jh-software-grid { grid-template-columns: minmax(0,1fr); gap: 35px; }
      #site-root .jh-content { padding: 0 24px; }
      #site-root .jh-section { padding: 46px 0; }
      #site-root .jh-section h2 { font-size: 24px; }
      #site-root .jh-section-heading { align-items: flex-start; gap: 12px; }
      #site-root .jh-community-preview { display: block; padding-top: 0; }
      #site-root .jh-community-preview .jh-button { margin-top: 22px; }
      #site-root .jh-about { gap: 17px; }
      #site-root .jh-avatar { width: 51px; height: 51px; font-size: 19px; }
      #site-root .jh-about h2 { font-size: 22px; }
      #site-root .jh-footer { padding: 24px; flex-wrap: wrap; }
      #site-root .jh-community-page { padding: 32px 24px 50px; }
      #site-root .jh-form { padding: 17px; }
      #site-root .jh-view-controls { display: block; }
      #site-root .jh-scroll { margin-left: 9px; margin-top: 7px; }
    }
    @media(prefers-reduced-motion: reduce) { #site-root * { scroll-behavior: auto !important; } }