.direction-category-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;border-top:1px solid #dce6ef;padding-top:24px;margin:26px 0 28px}
.direction-art-card.tone-cyan{--art-bg:#eaf5f8;--art-accent:#287d8e;--art-line:#cee3e9}
.direction-category-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:19px;min-height:190px;padding:23px 12px;border:1px solid #d5e3ef;border-radius:17px;background:#fff;color:#243d54;text-align:center;text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s}
.direction-category-tile:not(.is-soon):hover,.direction-category-tile.is-selected{border-color:#7eafce;box-shadow:0 9px 25px #285d8910;transform:translateY(-3px)}
.direction-category-tile:focus-visible{outline:3px solid #347daf;outline-offset:4px}
.direction-category-art{--ink:#288e91;--wash:#e9f7f3;position:relative;display:grid;place-items:center;width:75px;height:75px;border-radius:27px 30px 25px 22px;background:var(--wash);color:var(--ink);box-shadow:0 8px 22px #24476506}
.direction-category-art:before{content:'';position:absolute;inset:8px;border:1px solid currentColor;opacity:.13;border-radius:50%}
.direction-category-art svg{width:46px;height:46px;z-index:1}.direction-category-art i{position:absolute;width:10px;height:10px;right:12px;top:10px;border-radius:50%;background:currentColor;opacity:.3}
.direction-category-art.tone-rose{--ink:#cd766b;--wash:#fff0ea}.direction-category-art.tone-violet{--ink:#8b72b8;--wash:#f5effc}.direction-category-art.tone-sand{--ink:#a58137;--wash:#fcf6e8}.direction-category-art.tone-blue{--ink:#4b83ce;--wash:#eef5ff}.direction-category-art.tone-cyan{--ink:#3893a5;--wash:#edf9fc}
.direction-category-name{font-size:14px;line-height:1.5;font-weight:650;max-width:145px}.direction-category-soon{position:absolute;bottom:8px;font-size:10px;color:#7b8d9c;font-weight:400;letter-spacing:.04em}.direction-category-tile.is-soon{cursor:default}
.direction-category-reset{display:block;width:max-content;max-width:100%;font-size:13px;color:#396b91;margin:-12px auto 22px;text-align:center;text-decoration:none}.direction-category-reset:hover{text-decoration:underline}
@media(max-width:1050px){.direction-category-nav{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.direction-category-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.direction-category-tile{min-height:166px;gap:14px;padding:19px 10px}.direction-category-art{width:65px;height:65px}.direction-category-name{font-size:13px}}
@media(prefers-reduced-motion:reduce){.direction-category-tile{transition:none}.direction-category-tile:not(.is-soon):hover{transform:none}}