/* Ratios from shuiyinyun.com/tools, scoped to the catalog instead of changing
   the site's root font size. Grid keeps longer configured descriptions visible. */
body[data-page=tools] {
    --catalog-unit: clamp(15px, .9375vw, 18px);
}
body[data-page=tools] .workspace {
    background: linear-gradient(114deg, rgb(223, 238, 252), rgb(246, 250, 255) 38%, rgb(255, 248, 248) 81%, rgb(237, 244, 255));
}
body[data-page=tools] .page-container {
    width: min(100%, calc(var(--catalog-unit) * 79.688));
    max-width: none;
    padding: calc(var(--catalog-unit) * 4.688) 15px;
    font-family: PingFangSC-Regular, "PingFang SC", "Microsoft Yahei", "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
}
.catalog-slogan { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin: 0; color: rgb(51,51,51); font-size: calc(var(--catalog-unit) * 2.917); font-weight: 600; line-height: 1.5; letter-spacing: 0; overflow-wrap: anywhere; text-align: center; }
.catalog-slogan-gradient { background: linear-gradient(90deg, rgb(0,125,255), rgb(123,97,255) 50%, rgb(247,69,255)); background-clip: text; -webkit-background-clip: text; color: transparent; }
.catalog-group { margin-top: calc(var(--catalog-unit) * 5.208); }
.catalog-category-title { position: relative; isolation: isolate; font-size: calc(var(--catalog-unit) * 1.875); color: rgb(51,51,51); font-weight: 700; padding-left: calc(var(--catalog-unit) * 1.198); line-height: 1.5; letter-spacing: 0; margin: 0 0 calc(var(--catalog-unit) * 2.344); }
.catalog-category-title::before { content: ""; position: absolute; z-index: -1; left: 0; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: rgb(213,225,255); }
.catalog-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--catalog-unit) * 1.562); }
.catalog-item {
    display: block;
    min-width: 0;
    min-height: calc(var(--catalog-unit) * 10.938);
    background: rgb(255,255,255);
    border: 2px solid transparent;
    border-radius: calc(var(--catalog-unit) * 1.563);
    padding: calc(var(--catalog-unit) * 2.083) calc(var(--catalog-unit) * 1.563);
    color: rgb(51,51,51);
    transition: background .3s ease-in-out, box-shadow .3s ease-in-out, border-color .3s ease-in-out;
}
.catalog-item:hover, .catalog-item:focus-visible {
    background: linear-gradient(130deg, rgb(223,238,252), rgb(246,250,255) 50%, rgb(223,238,252));
    box-shadow: 0 0 calc(var(--catalog-unit) * 1.563) rgba(0,125,255,.11);
    border-color: rgba(0,125,255,.6);
}
.catalog-heading { display: flex; align-items: center; gap: calc(var(--catalog-unit) * .677); }
.catalog-heading .catalog-icon { width: calc(var(--catalog-unit) * 2.708); height: calc(var(--catalog-unit) * 2.708); flex-shrink: 0; border-radius: 50%; object-fit: contain; }
.catalog-heading .catalog-icon[hidden] { display: none; }
.catalog-heading h3 { margin: 0; font-size: calc(var(--catalog-unit) * 1.458); line-height: 1.5; font-weight: 400; letter-spacing: 0; overflow-wrap: anywhere; }
.catalog-description { color: rgb(153,153,153); font-size: calc(var(--catalog-unit) * .938); line-height: 1.5; margin: calc(var(--catalog-unit) * .521) 0 0; overflow-wrap: anywhere; }
@media (max-width: 900px) {
    .catalog-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    body[data-page=tools] .page-container { padding: var(--space-xxl) var(--page-gutter); }
    .catalog-slogan { font-size: var(--font-xxl); }
    .catalog-group { margin-top: calc(var(--space-xl) * 2); }
    .catalog-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
    .catalog-item { min-height: 0; padding: var(--space-xl); }
    .catalog-heading h3 { font-size: var(--font-xl); }
}
@media (prefers-reduced-motion: reduce) { .catalog-item { transition: none; } }