:root {
      --bg-1: #dbe4ff;
      --bg-2: #f6f8ff;
      --bg-3: #e6eeff;
      --panel: #ffffff;
      --panel-2: #ffffff;
      --head: #ffffff;
      --border: rgba(255, 255, 255, .8);
      --line: rgba(22, 32, 64, .09);
      --line-2: rgba(22, 32, 64, .06);
      --text: #1a2036;
      --dim: #5b6580;
      --mute: #8d97ae;
      --accent: #4f5bff;
      --accent-2: #7c5cff;
      --accent-soft: rgba(79, 91, 255, .1);
      --accent-line: rgba(79, 91, 255, .28);
      --ok: #12a06b;
      --warn: #c97b16;
      --shadow: 0 22px 60px -24px rgba(24, 34, 74, .32);
      --shadow-sm: 0 8px 22px -14px rgba(24, 34, 74, .34);
      --radius: 16px;
      --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
      --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }

    html[data-theme="dark"] {
      --bg-1: #161d3a;
      --bg-2: #0b0f1c;
      --bg-3: #101733;
      --panel: #121728;
      --panel-2: #191f33;
      --head: #1b2236;
      --border: rgba(255, 255, 255, .1);
      --line: rgba(255, 255, 255, .09);
      --line-2: rgba(255, 255, 255, .05);
      --text: #e9edf9;
      --dim: #a6b0c8;
      --mute: #7b869f;
      --accent: #7d88ff;
      --accent-2: #a78bfa;
      --accent-soft: rgba(125, 136, 255, .14);
      --accent-line: rgba(125, 136, 255, .34);
      --ok: #34c58d;
      --warn: #e0a04a;
      --shadow: 0 26px 70px -26px rgba(0, 0, 0, .8);
      --shadow-sm: 0 10px 26px -16px rgba(0, 0, 0, .8);
    }

    * {
      box-sizing: border-box;
      scrollbar-width: thin;
      scrollbar-color: rgba(22, 32, 64, .28) transparent
    }

    html[data-theme="dark"] * {
      scrollbar-color: rgba(255, 255, 255, .22) transparent
    }

    ::-webkit-scrollbar {
      width: 10px;
      height: 10px
    }

    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-corner {
      background: transparent
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(22, 32, 64, .28)
    }

    ::-webkit-scrollbar-thumb:hover {
      background: rgba(22, 32, 64, .45)
    }

    html[data-theme="dark"] ::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, .22)
    }

    html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, .35)
    }

    html,
    body {
      height: 100%
    }

    body {
      margin: 0;
      font-family: var(--sans);
      color: var(--text);
      overflow: hidden;
      background: var(--bg-2);
      -webkit-font-smoothing: antialiased;

    }

    h1,
    h2,
    h3,
    h4 {
      margin: 0;
      font-weight: 650;
      letter-spacing: -.01em
    }

    a {
      color: var(--accent);
      text-decoration: none
    }

    a:hover {
      text-decoration: underline
    }

    button {
      font-family: inherit;
      cursor: pointer
    }

    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
}

    .page-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-size: cover;
      background-position: center;
      opacity: 0;

    }

.page-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--bg-2);
    }

    html[data-theme="dark"] .page-bg::after {
      background: var(--bg-2);
    }

    .app {
      position: relative;
      z-index: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      min-height: 0
    }

    .topbar {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 12px 18px;
      border-bottom: 1px solid var(--line-2);
    }

    .brand {
      display: flex;
      align-items: baseline;
      gap: 2px;
      margin: 0;
      font-size: 19px;
      font-weight: 750;
      letter-spacing: .02em;
      white-space: nowrap;
    }

    .brand em {
      font-style: normal;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .18em;
      color: var(--accent);
      padding: 2px 5px;

      background: var(--accent-soft);
      transform: translateY(-3px);
    }

    .search {
      flex: 1 1 auto;
      display: flex;
      gap: 8px;
      max-width: 760px;
      margin: 0 auto;
      background: var(--panel-2);
      border: 1px solid var(--border);

      padding: 4px 4px 4px 14px;

    }

    .search:focus-within {
      border-color: var(--accent-line);
}

    .search input {
      flex: 1 1 auto;
      min-width: 0;
      border: 0;
      background: transparent;
      color: var(--text);
      font-size: 13.5px;
      padding: 8px 0;
      outline: none;
    }

    .search input::placeholder {
      color: var(--mute)
    }

    .btn {
      border: 1px solid var(--border);
      background: var(--panel-2);
      color: var(--text);

      padding: 8px 14px;
      font-size: 13px;
      font-weight: 600;

    }

    .btn:hover {
      border-color: var(--accent-line)
    }

    .btn:active {
      transform: translateY(1px)
    }

    .btn.primary {
      background: var(--accent);
      color: #fff;
      border-color: transparent;

    }

    .btn.ghost {
      background: transparent
    }

    .btn[disabled] {
      opacity: .55;
      cursor: progress
    }

    .btn.sm {
      padding: 5px 10px;
      font-size: 12px;
}

    .top-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto
    }

    .icon-btn {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;

      border: 1px solid var(--border);
      background: var(--panel-2);
      color: var(--dim);
    }

    .icon-btn:hover {
      color: var(--accent);
      border-color: var(--accent-line)
    }

    .body {
      flex: 1 1 auto;
      display: flex;
      gap: 14px;
      padding: 14px 18px 18px;
      min-height: 0
    }

    .sidebar {
      flex: 0 0 244px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 0;
      background: var(--panel);
      border: 1px solid var(--border);

      padding: 12px;
    }

    .ctx {
      display: flex;
      gap: 10px;
      align-items: center;
      padding: 9px 10px;

      background: var(--accent-soft);
      border: 1px solid var(--accent-line);
    }

    .ctx img {
      width: 34px;
      height: 34px;

      object-fit: cover;
      background: var(--line)
    }

    .ctx .ctx-txt {
      min-width: 0
    }

    .ctx b {
      display: block;
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .ctx span {
      font-size: 11px;
      color: var(--dim)
    }

    .nav {
      flex: 1 1 auto;
      overflow: auto;
      margin: 0;
      padding: 0;
      list-style: none;

}

    .nav-group {
      margin-bottom: 12px
    }

    .nav-group>p {
      margin: 0 0 6px;
      padding: 0 8px;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .12em;
      color: var(--mute);
      text-transform: uppercase;
    }

    .nav-item {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px 9px;
      margin-bottom: 2px;
      border: 0;

      background: transparent;
      color: var(--dim);
      font-size: 13px;
      text-align: left;

    }

    .nav-item:hover {
      background: var(--accent-soft);
      color: var(--text)
    }

    .nav-item[aria-current="true"] {
      background: var(--accent-soft);
      color: var(--accent);
      font-weight: 650
    }

    .nav-item svg {
      flex: 0 0 auto;
      opacity: .9
    }

    .nav-item .nav-caret {
      flex: 0 0 auto;
      font-size: 10px;
      line-height: 1;
      opacity: .7;
}

    .nav-item.folder[aria-expanded="true"] {
      color: var(--text)
    }

    .nav-item.folder[aria-expanded="true"] .nav-caret {
      transform: rotate(90deg)
    }

    .nav-sub {
      list-style: none;
      margin: 0 0 6px;
      padding: 0 0 0 16px
    }

    .nav-sub .nav-item {
      padding: 6px 8px;
      font-size: 12.5px
    }

    .nav-empty {
      padding: 10px;
      font-size: 12px;
      color: var(--mute);
      line-height: 1.6
    }

    .side-foot {
      display: flex;
      gap: 6px;
      padding-top: 8px;
      border-top: 1px solid var(--line-2)
    }

    .side-foot .btn {
      flex: 1 1 0;
      text-align: center;
      padding: 7px 0
    }

    .hd {
      flex: 1 1 auto;
      position: relative;
      min-height: 0;
      overflow: hidden;
      display: grid;
      place-items: center;
      padding: 24px 24px 56px;
    }

    .hd[hidden] {
      display: none
    }

    .b1 {
      background: var(--accent);
      top: -18vmax;
      left: -12vmax;
}

    .b2 {
      background: var(--accent-2);
      bottom: -20vmax;
      right: -14vmax;
}

    .b3 {
      background: #2b53c9;
      top: 30%;
      left: 55%;
      width: 30vmax;
      height: 30vmax;

      opacity: .12
    }

    @media (prefers-reduced-motion: reduce) {

      .d-ico,
}

    .hd-icons {
      position: absolute;
      top: 18px;
      left: 18px;
      z-index: 2;
      width: 128px;
      max-height: calc(100% - 80px);
      display: grid;
      grid-template-columns: 1fr;
      gap: 9px;
      align-content: start;
      overflow: auto;
      padding: 2px;

}

    .d-ico {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
      padding: 11px 6px 9px;
      border: 1px solid var(--line);

      background: var(--panel-2);
      color: var(--text);

    }

    .d-ico .d-badge {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;

      color: var(--accent);
      background: var(--accent-soft);
      border: 1px solid var(--accent-line);

    }

    .d-ico .d-name {
      font-size: 11px;
      line-height: 1.3;
      text-align: center;
      max-width: 100%;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden
    }

    .d-ico:hover {
      transform: translateY(-3px);
      border-color: var(--accent-line);
}

    .d-ico:hover .d-badge {
      transform: scale(1.05);
}

    .workspace {
      flex: 1 1 auto;
      position: relative;
      min-width: 0;
      min-height: 0;

      border: 1px solid var(--border);
      background: var(--panel);

      overflow: hidden;
    }

    .ws-bar {
      position: absolute;
      inset: 0 0 auto 0;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 14px;
      border-bottom: 1px solid var(--line-2);
      background: var(--head);

      min-height: 44px;
    }

    .ws-bar .ws-title {
      flex: 0 1 auto;
      min-width: 0;
      font-size: 12.5px;
      font-weight: 650;
      color: var(--dim);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .ws-bar .ws-title b {
      color: var(--text)
    }

    .ws-bar .spacer {
      flex: 1 1 auto
    }

    .ws-bar .btn {
      padding: 5px 9px;
      font-size: 11.5px;
}

    .ws-hint {
      font-size: 11px;
      color: var(--mute);
      white-space: nowrap
    }

    .empty {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 18px;
      padding: 64px 28px 32px;
      text-align: center;
    }

    .empty .glyph {
      width: 56px;
      height: 56px;

      display: grid;
      place-items: center;
      color: var(--accent);
      background: var(--accent-soft);
      border: 1px solid var(--accent-line);
    }

    .empty h2 {
      font-size: 17px
    }

    .empty p {
      margin: 0;
      max-width: 520px;
      font-size: 13px;
      line-height: 1.75;
      color: var(--dim)
    }

    .samples {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center
    }

    .sample {
      display: flex;
      flex-direction: column;
      gap: 2px;
      align-items: flex-start;
      padding: 9px 13px;

      border: 1px solid var(--border);
      background: var(--panel-2);
      color: var(--text);
      font-size: 12.5px;
      text-align: left;

    }

    .sample:hover {
      border-color: var(--accent-line);
      transform: translateY(-1px)
    }

    .sample span {
      font-size: 11px;
      color: var(--mute);
      font-family: var(--mono)
    }

    .error-box {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 12px;
      padding: 80px 28px 32px;
      text-align: center;
    }

    .error-box .badge-err {
      color: #c0392b;
      background: rgba(192, 57, 43, .1);
      border: 1px solid rgba(192, 57, 43, .25);
      padding: 4px 10px;

      font-size: 11.5px;
      font-weight: 650;
    }

    html[data-theme="dark"] .error-box .badge-err {
      color: #ff8f7f;
      border-color: rgba(255, 143, 127, .3);
      background: rgba(255, 143, 127, .1)
    }

    .error-box p {
      margin: 0;
      font-size: 13px;
      color: var(--dim);
      max-width: 460px;
      line-height: 1.7
    }

    .hd-hero {
      position: relative;
      z-index: 1;
      width: min(640px, 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
      text-align: center;
    }

    .logo {
      font-size: clamp(46px, 7vw, 68px);
      font-weight: 800;
      letter-spacing: .04em;
      line-height: 1.1;

      user-select: none;
    }

.hd-hero p {
      margin: 0;
      max-width: 520px;
      font-size: 13px;
      line-height: 1.75;
      color: var(--dim)
    }

    .hd-theme {
      border: 0;
      background: transparent;
      color: var(--dim);
      font-size: 11.5px;
      letter-spacing: .06em;
      padding: 4px 10px;

      margin-left: 6px;

    }

    .hd-theme:hover {
      color: var(--accent);
      background: var(--accent-soft)
    }

    .hd-hero .home-card {
      width: 100%;
      margin-top: 6px;
      text-align: left
    }

    .home-card {
      width: 100%;
      padding: 30px 34px;

      background: var(--panel);
      border: 1px solid var(--border);

    }

    .input-row {
      display: flex;
      gap: 10px
    }

    .input-row input {
      flex: 1 1 auto;
      min-width: 0;
      padding: 14px 18px;

      border: 1px solid var(--border);
      background: var(--panel-2);
      color: var(--text);
      outline: none;
      font-size: 14px;

    }

    .input-row input::placeholder {
      color: var(--mute)
    }

    .input-row input:focus {
      border-color: var(--accent-line);
}

    .input-row button {
      padding: 0 26px;
      background: var(--accent);
      border: 0;
      font-size: 14px;
      font-weight: 700;
      color: #fff;

    }

    .input-row button:hover {
      filter: brightness(1.12);
      transform: translateY(-1px)
    }

    .detect {
      margin-top: 12px;
      font-size: 12px;
      color: var(--dim);
      min-height: 18px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .detect .dot {
      width: 7px;
      height: 7px;

      background: var(--mute);
      flex: 0 0 auto
    }

    .detect.t-work .dot {
      background: var(--accent);
}

    .detect.t-user .dot {
      background: var(--accent-2);
}

    .detect.t-bad .dot {
      background: #c0392b
    }

    .home-foot {
      position: absolute;
      bottom: 22px;
      left: 0;
      right: 0;
      text-align: center;
      color: var(--mute);
      font-size: 11.5px;
      letter-spacing: .08em;
    }

    .win {
      position: absolute;
      width: min(576px, calc(100% - 28px));
      max-height: calc(100% - 68px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: var(--panel);
      border: 1px solid var(--border);

    }

    .win.opening {
      opacity: 0;
      transform: scale(.9) translateY(10px)
    }

    .win.closing {
      opacity: 0;
      transform: scale(.94);
      pointer-events: none
    }

    .win.dragging {
      transform: scale(1.012);
      border-color: var(--accent-line);

}

.win.active {
      border-color: var(--accent-line);
}

    .win.wide {
      width: min(648px, calc(100% - 28px))
    }

.win-head {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 10px 9px 12px;
      background: var(--head);
      border-bottom: 1px solid var(--line-2);
      cursor: grab;
      user-select: none;
      touch-action: none;
    }

    .win-head:active {
      cursor: grabbing
    }

    .win-head .w-ico {
      display: grid;
      place-items: center;
      color: var(--accent)
    }

    .win-head .w-title {
      font-size: 12.5px;
      font-weight: 650;
      letter-spacing: .01em;
      flex: 1 1 auto;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .win-btns {
      display: flex;
      gap: 3px;
      flex: 0 0 auto
    }

    .win-btns button {
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;

      border: 1px solid transparent;
      background: transparent;
      color: var(--mute);
      font-size: 14px;
      line-height: 1;
    }

    .win-btns button:hover {
      background: var(--accent-soft);
      color: var(--accent);
      border-color: var(--accent-line)
    }

    .win-btns button[data-act="close"]:hover {
      color: #c0392b;
      background: rgba(192, 57, 43, .1);
      border-color: rgba(192, 57, 43, .25)
    }

    .win-body {
      overflow: auto;
      padding: 14px;
      min-height: 0
    }

    .win.collapsed .win-body {
      display: none
    }

    .win.collapsed {
      max-height: none
    }

    .win.collapsed .win-head {
      border-bottom-color: transparent
    }

    .skel {
      display: flex;
      flex-direction: column;
      gap: 9px
    }

    .skel i {
      display: block;
      height: 12px;

      background-size: 200% 100%;

    }

    .skel i:nth-child(1) {
      width: 52%;
      height: 16px
    }

    .skel i:nth-child(3) {
      width: 80%
    }

    .skel i:nth-child(4) {
      width: 64%
    }

    .sec-h {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin: 16px 0 8px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--mute);
      text-transform: uppercase;
    }

    .sec-h:first-child {
      margin-top: 0
    }

    .sec-h::after {
      content: "";
      flex: 1 1 auto;
      height: 1px;
      background: var(--line-2)
    }

    .cover {
      width: 100%;
      aspect-ratio: 16/9;

      object-fit: cover;
      border: 1px solid var(--line);
      background: var(--line-2);
      display: block;
    }

    .cover.banner {
      aspect-ratio: 3/1
    }

    .cover-wrap {
      position: relative
    }

    .cover-tag {
      position: absolute;
      top: 8px;
      right: 8px;
      padding: 2px 8px;

      font-size: 10.5px;
      font-weight: 650;
      color: #fff;
      background: rgba(10, 16, 38, .5);
      border: 1px solid rgba(255, 255, 255, .22);

    }

    .title-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 12px
    }

    .title-row h3 {
      font-size: 16.5px;
      line-height: 1.35;
      flex: 1 1 auto;
      word-break: break-word
    }

    .badges {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 8px
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 7px;

      font-size: 11px;
      font-weight: 600;
      color: var(--dim);
      background: var(--line-2);
      border: 1px solid var(--line);
      white-space: nowrap;
    }

    .badge.on {
      color: var(--ok);
      background: rgba(18, 160, 107, .1);
      border-color: rgba(18, 160, 107, .24)
    }

    .badge.acc {
      color: var(--accent);
      background: var(--accent-soft);
      border-color: var(--accent-line)
    }

    .badge.warn {
      color: var(--warn);
      background: rgba(201, 123, 22, .1);
      border-color: rgba(201, 123, 22, .24)
    }

    .metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 12px;
      margin-bottom: 10px
    }

    .metric {
      padding: 9px 10px;

      background: var(--panel-2);
      border: 1px solid var(--line);
      min-width: 0;
    }

    .metric b {
      display: block;
      font-family: var(--mono);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -.02em
    }

    .metric span {
      display: block;
      margin-top: 2px;
      font-size: 11px;
      color: var(--mute)
    }

    .kv {
      margin: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;

      overflow: hidden;
      background: var(--line-2);
      border: 1px solid var(--line-2)
    }

    .kv>div {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 10px;
      background: var(--panel-2);
      min-width: 0
    }

    .kv dt {
      font-size: 11.5px;
      color: var(--mute);
      white-space: nowrap
    }

    .kv dd {
      margin: 0;
      font-size: 11.5px;
      font-weight: 600;
      text-align: right;
      word-break: break-word;
      min-width: 0
    }

    .kv.wide {
      grid-template-columns: 1fr
    }

    .txt {
      margin: 0;
      font-size: 12.5px;
      line-height: 1.75;
      color: var(--dim);
      white-space: pre-wrap;
      word-break: break-word
    }

    .txt.clamp {
      max-height: 120px;
      overflow: auto;

    }

    .txt.rich {
      white-space: pre-line
    }

    .intro-body {
      margin-top: 10px;
      font-size: 12.5px;
      line-height: 1.75;
      color: var(--dim);
      white-space: pre-line;
      word-break: break-word
    }

    .intro-body iframe,
    .intro-body img,
    .intro-body video,
    .intro-body table {
      max-width: 100%
    }

    .mono {
      font-family: var(--mono);
      font-size: 11.5px
    }

    .person {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 9px 10px;

      background: var(--panel-2);
      border: 1px solid var(--line)
    }

    .person img {
      width: 34px;
      height: 34px;

      object-fit: cover;
      background: var(--line-2);
      flex: 0 0 auto
    }

    .person .p-txt {
      min-width: 0;
      flex: 1 1 auto
    }

    .person b {
      display: block;
      font-size: 12.5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .person span {
      display: block;
      font-size: 11px;
      color: var(--mute);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .chip-link {
      border: 0;
      background: transparent;
      color: var(--accent);
      font-size: 11.5px;
      padding: 0;
      font-weight: 600
    }

    .chip-link:hover {
      text-decoration: underline
    }

    .list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin: 0;
      padding: 0;
      list-style: none
    }

    .row {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px 10px;

      background: var(--panel-2);
      border: 1px solid var(--line);
      font-size: 12px;
    }

    .row .r-main {
      flex: 1 1 auto;
      min-width: 0
    }

    .row .r-main b {
      display: block;
      font-size: 12.5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .row .r-main span {
      display: block;
      font-size: 11px;
      color: var(--mute);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .row .r-num {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 700;
      color: var(--dim);
      flex: 0 0 auto
    }

    .rank {
      width: 20px;
      height: 20px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;

      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      color: var(--mute);
      background: var(--line-2)
    }

    .rank.top {
      color: #fff;
}

    .bar-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11.5px;
      margin-bottom: 6px
    }

    .bar-row .b-label {
      flex: 0 0 96px;
      color: var(--dim);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .bar-row .b-track {
      flex: 1 1 auto;
      height: 6px;

      background: var(--line-2);
      overflow: hidden
    }

    .bar-row .b-fill {
      display: block;
      height: 100%;

}

    .bar-row .b-val {
      flex: 0 0 46px;
      text-align: right;
      font-family: var(--mono);
      color: var(--mute)
    }

    .heat-wrap {
      overflow-x: auto;
      padding-bottom: 4px;

}

    .heat {
      display: grid;
      grid-template-rows: repeat(7, 11px);
      grid-auto-flow: column;
      grid-auto-columns: 11px;
      gap: 3px;
      width: max-content
    }

    .heat i {
      display: block;

      background: var(--line-2)
    }

    .heat i.l1 {
      background: rgba(79, 91, 255, .24)
    }

    .heat i.l2 {
      background: rgba(79, 91, 255, .44)
    }

    .heat i.l3 {
      background: rgba(79, 91, 255, .68)
    }

    .heat i.l4 {
      background: var(--accent)
    }

    .heat-legend {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 7px;
      font-size: 10.5px;
      color: var(--mute)
    }

    .heat-legend i {
      width: 11px;
      height: 11px;

      display: block;
      background: var(--line-2)
    }

    .heat-legend i.l1 {
      background: rgba(79, 91, 255, .24)
    }

    .heat-legend i.l2 {
      background: rgba(79, 91, 255, .44)
    }

    .heat-legend i.l3 {
      background: rgba(79, 91, 255, .68)
    }

    .heat-legend i.l4 {
      background: var(--accent)
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px
    }

    .card {
      display: flex;
      flex-direction: column;

      overflow: hidden;
      text-align: left;
      border: 1px solid var(--line);
      background: var(--panel-2);
      padding: 0;
      color: var(--text);

    }

    .card:hover {
      border-color: var(--accent-line);
      transform: translateY(-1px)
    }

    .card img {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      background: var(--line-2);
      display: block
    }

    .card .c-body {
      padding: 7px 8px 8px;
      min-width: 0
    }

    .card b {
      display: block;
      font-size: 12px;
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .card span {
      display: block;
      margin-top: 3px;
      font-size: 10.5px;
      color: var(--mute);
      font-family: var(--mono)
    }

    .note {
      display: flex;
      gap: 8px;
      padding: 9px 10px;

      font-size: 11.5px;
      line-height: 1.65;
      color: var(--dim);
      background: var(--accent-soft);
      border: 1px solid var(--accent-line);
    }

    .note.muted {
      background: var(--line-2);
      border-color: var(--line);
      color: var(--mute)
    }

    .big-stat {
      display: flex;
      align-items: baseline;
      gap: 7px;
      margin-bottom: 2px
    }

    .big-stat b {
      font-family: var(--mono);
      font-size: 25px;
      font-weight: 700;
      letter-spacing: -.03em
    }

    .big-stat span {
      font-size: 11.5px;
      color: var(--mute)
    }

    .mastery {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px 14px
    }

    .mastery .m-row {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 11.5px;
      padding: 3px 0
    }

    .mastery .m-row span {
      flex: 0 0 78px;
      color: var(--dim);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .mastery .m-dots {
      display: flex;
      gap: 3px
    }

    .mastery .m-dots i {
      width: 9px;
      height: 9px;

      background: var(--line-2);
      display: block
    }

    .mastery .m-dots i.on {
      background: var(--accent)
    }

    .tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 5px
    }

    .tag {
      font-size: 11px;
      padding: 2px 7px;

      color: var(--dim);
      background: var(--line-2);
      border: 1px solid var(--line);
    }

    .stat-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px
    }

    .demo-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: #0b0f1c;

      overflow: hidden;
      border: 1px solid var(--line)
    }

    .demo-wrap iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0
    }

    .demo-wrap.portrait {
      aspect-ratio: 9 / 16;
      width: auto;
      max-width: 300px;
      margin: 0 auto
    }

    .demo-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 10px;
      font-size: 11.5px;
      color: var(--mute)
    }

    @media (max-width:900px) {
      body {
        overflow: auto
      }

      .topbar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 12px
      }

      .brand {
        font-size: 17px
      }

      .search {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
        margin: 0
      }

      .top-actions {
        margin-left: auto
      }

      .body {
        flex-direction: column;
        padding: 10px 12px 16px;
        min-height: 0
      }

      .sidebar {
        flex: 0 0 auto;
        max-height: none
      }

      .nav {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 2px
      }

      .nav-group {
        margin: 0;
        display: flex;
        gap: 6px;
        align-items: center
      }

      .nav-group>p {
        display: none
      }

      .nav-item {
        white-space: nowrap;
        width: auto;
        border: 1px solid var(--line);
        background: var(--panel-2)
      }

      .side-foot {
        display: none
      }

      .workspace {
        min-height: 70vh;
        overflow: visible;
        padding-top: 0
      }

      .ws-bar {
        position: sticky;
        top: 0;
}

      .win {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        z-index: auto !important;
        max-height: none;
        margin: 12px;
        width: calc(100% - 24px) !important;
      }

      .win.opening,
      .win.closing,
      .win.dragging {
        transform: none
      }

      .win-head {
        cursor: default;
        touch-action: auto
      }

      .empty,
      .error-box {
        position: relative;
        inset: auto;
        padding: 40px 18px
      }

      .hd {
        padding: 14px 12px 52px
      }

      .hd-icons {
        width: 96px;
        max-height: none
      }

      .kv {
        grid-template-columns: 1fr
      }

      .cards {
        grid-template-columns: 1fr
      }

      .mastery {
        grid-template-columns: 1fr
      }

      .metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }
    }

    @media print {
      body {
        overflow: visible;
        background: #fff;
        color: #000
      }

      .topbar,
      .sidebar,
      .ws-bar,
      .win-btns,
      .empty,
      .error-box,
      .home-wrap {
        display: none !important
      }

      .body {
        display: block;
        padding: 0
      }

      .workspace {
        border: 0;

        background: #fff;
        overflow: visible;
        padding: 0
      }

      .win {
        position: static !important;
        width: 100% !important;
        max-height: none !important;

        border: 1px solid #ddd;
        margin-bottom: 12px;
        break-inside: avoid;

        background: #fff;
      }

      .win.collapsed .win-body {
        display: block
      }

      .heat i {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact
      }
    }