@import url('tool-icons/css/fontawesome.min.css');
@import url('tool-icons/css/solid.min.css');
@import url('tool-icons/css/regular.min.css');
@font-face {
    font-family: 'DM Sans';
    src: url('fonts/dm-sans-latin-wght-normal.woff2') format('woff2');
    font-weight: 100 1000;
    font-display: swap;
}
:root {
    --kit-bg: #f8fafc;
    --kit-surface: #fff;
    --kit-line: #dce2ec;
    --kit-ink: #172239;
    --kit-muted: #536278;
    --kit-accent: #275bd1;
    --kit-tint: #e9f0ff;
    --kit-font: 'DM Sans', 'Segoe UI', sans-serif;
}
body[data-theme='dark'] {
    --kit-bg: #151b25;
    --kit-surface: #1d2531;
    --kit-line: #394352;
    --kit-ink: #f1f4fa;
    --kit-muted: #afbdd2;
    --kit-accent: #98baff;
    --kit-tint: #263b61;
    color-scheme: dark;
}
.kit-directory {
    color: var(--kit-ink);
    background: var(--kit-bg);
    font-family: var(--kit-font);
    min-height: 100dvh;
    line-height: 1.45;
}
.kit-directory * {
    box-sizing: border-box;
}
.kit-directory [hidden],
.kit-directory[hidden] {
    display: none !important;
}
.kit-bar {
    background: var(--kit-surface);
    border-bottom: 1px solid var(--kit-line);
}
.kit-bar-inner,
.kit-main {
    width: min(1256px, calc(100% - 72px));
    margin: auto;
}
.kit-bar-inner,
.kit-bar-actions,
.kit-brand,
.kit-private {
    display: flex;
    align-items: center;
}
.kit-bar-inner {
    height: 66px;
    justify-content: space-between;
}
.kit-brand {
    gap: 10px;
    font-size: 1.14rem;
    font-weight: 760;
    letter-spacing: -0.045em;
}
.kit-brandmark,
.kit-theme,
.kit-symbol,
.kit-pen {
    display: grid;
    place-items: center;
}
.kit-brandmark {
    width: 31px;
    height: 31px;
    border-radius: 9px;
    background: #285ed4;
    color: #fff;
    font-size: 15px;
}
.kit-bar-actions {
    gap: 20px;
}
.kit-private {
    gap: 7px;
    font-size: 0.8rem;
    color: var(--kit-muted);
}
.kit-private i {
    font-size: 0.72rem;
    color: #369b83;
}
.kit-theme {
    width: 38px;
    height: 38px;
    background: var(--kit-bg);
    border: 1px solid var(--kit-line);
    color: var(--kit-ink);
    border-radius: 50%;
    cursor: pointer;
}
.kit-main {
    padding: 32px 0 64px;
}
.kit-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 184px;
    display: flex;
    align-items: center;
    border-radius: 20px;
    background: #183a80;
    color: white;
    padding: 35px clamp(24px, 4vw, 60px);
}
.kit-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(#92b5ff80 0.85px, transparent 0.85px);
    background-size: 14px 14px;
    mask-image: linear-gradient(100deg, transparent 28%, #000 85%);
}
.kit-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(115deg, #142f63 5%, #204a9b 58%, #2a5bb3);
}
.kit-intro {
    position: relative;
    z-index: 2;
    max-width: 68%;
}
.kit-intro h1 {
    margin: 0;
    font: 700 clamp(2.4rem, 4.8vw, 4rem) / 1 var(--kit-font);
    letter-spacing: -0.065em;
    color: white;
}
.kit-intro p {
    margin: 14px 0 0;
    font-size: clamp(0.95rem, 1.4vw, 1.12rem);
    line-height: 1.5;
    color: #dbe7ff;
}
.kit-illustration {
    position: absolute;
    right: clamp(35px, 8vw, 116px);
    top: 50%;
    width: 210px;
    height: 145px;
    transform: translateY(-50%);
    pointer-events: none;
}
.kit-sheet {
    position: absolute;
    width: 123px;
    height: 106px;
    border-radius: 12px;
    box-shadow: 0 12px 20px #08265922;
}
.kit-sheet-back {
    left: 12px;
    top: 22px;
    background: #628cd4;
    transform: rotate(-22deg);
}
.kit-sheet-mid {
    left: 36px;
    top: 15px;
    background: #9fbdf5;
    transform: rotate(-9deg);
}
.kit-sheet-front {
    left: 60px;
    top: 17px;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, #f5f9ff, #c6d8ff);
    color: #3264bb;
    transform: rotate(8deg);
    font-size: 56px;
}
.kit-pen {
    position: absolute;
    right: 8px;
    bottom: 9px;
    width: 47px;
    height: 47px;
    border-radius: 13px;
    background: #ffd28c;
    color: #75430d;
    font-size: 21px;
    box-shadow: 0 6px 10px #132e6733;
    transform: rotate(-9deg);
}
.kit-controls,
.kit-filters,
.kit-search {
    display: flex;
    align-items: center;
}
.kit-controls {
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 24px 0;
    border-bottom: 1px solid var(--kit-line);
}
.kit-filters {
    flex-wrap: wrap;
    gap: 6px;
}
.kit-filters button,
.kit-search {
    border: 1px solid var(--kit-line);
    background: var(--kit-surface);
    color: var(--kit-muted);
    border-radius: 9px;
    font: 600 0.84rem/1 var(--kit-font);
}
.kit-filters button {
    min-height: 38px;
    padding: 8px 14px;
    cursor: pointer;
}
.kit-filters button[aria-pressed='true'] {
    background: var(--kit-ink);
    color: var(--kit-surface);
    border-color: var(--kit-ink);
}
.kit-search {
    padding: 0 12px;
    gap: 9px;
    min-width: 0;
}
.kit-search input {
    color: var(--kit-ink);
    width: 150px;
    max-width: 100%;
    font: 500 0.89rem var(--kit-font);
    height: 38px;
    border: none;
    outline: 0;
    background: none;
}
.kit-search:focus-within,
.kit-directory :is(button, a):focus-visible {
    outline: 3px solid var(--kit-accent);
    outline-offset: 3px;
}
.kit-section {
    --tile-accent: #265dba;
    --tile-tint: #e7effe;
    margin-top: 26px;
}
.kit-color-1 {
    --tile-accent: #09776e;
    --tile-tint: #dff3ef;
}
.kit-color-2 {
    --tile-accent: #7b4aaa;
    --tile-tint: #efe7fb;
}
.kit-color-3 {
    --tile-accent: #ac542c;
    --tile-tint: #ffecde;
}
.kit-section h2 {
    margin: 0 0 12px;
    font: 700 1.18rem/1.3 var(--kit-font);
    letter-spacing: -0.033em;
    color: var(--kit-ink);
}
.kit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.kit-card {
    position: relative;
    display: block;
    padding: 17px 19px 18px;
    text-decoration: none;
    color: var(--kit-ink);
    background: var(--kit-surface);
    border: 1px solid var(--kit-line);
    border-radius: 13px;
    transition:
        box-shadow 0.15s,
        border-color 0.15s,
        transform 0.15s;
}
.kit-card:hover {
    transform: translateY(-2px);
    border-color: var(--kit-accent);
    box-shadow: 0 5px 16px #1e3d6810;
}
.kit-symbol {
    height: 35px;
    width: 37px;
    border-radius: 9px;
    background: var(--tile-tint);
    color: var(--tile-accent);
    font-size: 16px;
}
.kit-arrow {
    position: absolute;
    right: 19px;
    top: 24px;
    color: var(--kit-muted);
    font-size: 11px;
    opacity: 0.65;
}
.kit-card h3 {
    margin: 12px 0 3px;
    font: 700 1.06rem/1.2 var(--kit-font);
    letter-spacing: -0.025em;
}
.kit-card p,
.kit-empty {
    margin: 0;
    color: var(--kit-muted);
    font: 450 0.88rem/1.45 var(--kit-font);
}
.kit-empty {
    padding: 36px 0;
}
@media (max-width: 1000px) {
    .kit-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 740px) {
    .kit-bar-inner,
    .kit-main {
        width: calc(100% - 32px);
    }
    .kit-main {
        padding-top: 16px;
    }
    .kit-controls {
        align-items: stretch;
        flex-direction: column;
        padding: 16px 0;
    }
    .kit-filters {
        gap: 5px;
    }
    .kit-filters button {
        padding: 8px 11px;
        min-height: 40px;
    }
    .kit-search input {
        width: 100%;
        min-height: 42px;
        font-size: 1rem;
    }
    .kit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }
    .kit-hero {
        min-height: 165px;
    }
    .kit-illustration {
        right: 2%;
        transform: translateY(-50%) scale(0.72);
        transform-origin: right center;
    }
    .kit-card {
        padding: 14px;
    }
    .kit-arrow {
        right: 14px;
        top: 22px;
    }
    .kit-card p {
        font-size: 0.85rem;
    }
}
@media (max-width: 480px) {
    .kit-bar-inner {
        height: 56px;
    }
    .kit-bar-actions {
        gap: 10px;
    }
    .kit-private {
        font-size: 0.69rem;
    }
    .kit-theme {
        width: 36px;
        height: 36px;
    }
    .kit-hero {
        border-radius: 14px;
        min-height: 154px;
        padding: 18px;
    }
    .kit-intro {
        max-width: 65%;
    }
    .kit-intro h1 {
        font-size: clamp(1.72rem, 7.7vw, 2.28rem);
    }
    .kit-intro p {
        font-size: 0.86rem;
        margin-top: 9px;
    }
    .kit-illustration {
        right: 2%;
        transform: translateY(-50%) scale(0.52);
    }
    .kit-controls {
        gap: 10px;
    }
    .kit-section {
        margin-top: 21px;
    }
    .kit-card h3 {
        font-size: 1rem;
    }
    .kit-main {
        padding-bottom: 35px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .kit-card {
        transition: none;
    }
    .kit-card:hover {
        transform: none;
    }
}