/* ==========================================================================
   DataTrain Directory — "INDEX" design system (structure + theme).
   Scoped to body.dt-app (directory views only) so marketing pages stay light.
   Color = modality (information). Chrome = monochrome cool ink. Type = mono-forward.
   Ported from design-kit/datatrain-index.html.
   ========================================================================== */

/* --- Dark instrument-panel tokens (scoped to the directory) --------------- */
body.dt-app {
	--ink: #0A0D13;
	--panel: #10141D;
	--raised: #161C28;
	--line: #232B3A;
	--line-soft: #1A2130;
	--fg: #EAEEF6;
	--muted: #97A1B5;
	--faint: #5A6377;
	--focus: #7CC7FF;
	--live: #6FE3A0;

	/* Modality spectrum — the only hues in the product. */
	--m-image: #46BEF5;
	--m-video: #AC93FF;
	--m-audio: #F776B4;
	--m-text: #56DE8A;
	--m-3d: #F6B23C;
	--m-lidar: #FB8B45;
	--m-sensor: #35D2E0;
	--m-tabular: #9AA6BC;
	--m-multimodal: #8390FF;

	--ra: 4px;
	--ra-lg: 8px;

	background-color: var(--ink);
	color: var(--fg);
	background-image:
		linear-gradient(color-mix(in srgb, var(--line) 22%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--line) 22%, transparent) 1px, transparent 1px);
	background-size: 40px 40px, 40px 40px;
	background-position: -1px -1px, -1px -1px;
}

/* Modality → --mod. Card wrapper class and chip class both resolve here. */
.dt-app .dt-m-image,              .dt-app .dt-chip--image              { --mod: var(--m-image); }
.dt-app .dt-m-video,              .dt-app .dt-chip--video              { --mod: var(--m-video); }
.dt-app .dt-m-audio,              .dt-app .dt-chip--audio              { --mod: var(--m-audio); }
.dt-app .dt-m-text,               .dt-app .dt-chip--text               { --mod: var(--m-text); }
.dt-app .dt-m-3d-point-cloud,     .dt-app .dt-chip--3d-point-cloud     { --mod: var(--m-3d); }
.dt-app .dt-m-lidar-radar,        .dt-app .dt-chip--lidar-radar        { --mod: var(--m-lidar); }
.dt-app .dt-m-sensor-time-series, .dt-app .dt-chip--sensor-time-series { --mod: var(--m-sensor); }
.dt-app .dt-m-multimodal,         .dt-app .dt-chip--multimodal         { --mod: var(--m-multimodal); }
.dt-app .dt-m-tabular,            .dt-app .dt-chip--tabular            { --mod: var(--m-tabular); }

.dt-app .dt-mark { display: block; }
.dt-app :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* --- Global chrome overrides (beat main.css via .dt-app specificity) ------ */
.dt-app a { color: var(--fg); }
.dt-app a:hover { color: #fff; }

.dt-app .dt-header { background: color-mix(in srgb, var(--ink) 82%, transparent); border-bottom: 1px solid var(--line); }
.dt-app .dt-header__site-name,
.dt-app .dt-header__logo a { color: var(--fg); font-family: var(--dt-mono); letter-spacing: -0.02em; }
.dt-app .dt-nav li a { color: var(--muted); font-family: var(--dt-mono); font-size: 0.82rem; }
.dt-app .dt-nav li a:hover,
.dt-app .dt-nav li.current-menu-item a { color: var(--fg); background: var(--raised); }
.dt-app .dt-header__toggle span { background: var(--fg); }

.dt-app .dt-footer { background: transparent; border-top: 1px solid var(--line); color: var(--faint); }
.dt-app .dt-footer__logo,
.dt-app .dt-footer h4 { color: var(--fg); }
.dt-app .dt-footer__tagline,
.dt-app .dt-footer-nav a { color: var(--muted); }
.dt-app .dt-footer-nav a:hover { color: var(--fg); }
.dt-app .dt-footer__bottom { border-top-color: var(--line); color: var(--faint); }

.dt-app .dt-btn {
	font-family: var(--dt-mono); font-weight: 600;
	background: var(--fg); color: var(--ink); border: 1px solid var(--fg); border-radius: var(--ra);
}
.dt-app .dt-btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
.dt-app .dt-btn--outline { background: transparent; color: var(--fg); border-color: var(--line); }
.dt-app .dt-btn--outline:hover { background: var(--raised); border-color: var(--faint); color: var(--fg); }

.dt-app .dt-breadcrumbs { font-family: var(--dt-mono); font-size: 0.75rem; color: var(--faint); }
.dt-app .dt-breadcrumbs a { color: var(--muted); }
.dt-app .dt-breadcrumbs a:hover { color: var(--fg); }

.dt-app .dt-page-hero { background: transparent; border-bottom: 1px solid var(--line); text-align: left; }
.dt-app .dt-page-hero h1 { font-family: var(--dt-mono); color: var(--fg); letter-spacing: -0.03em; }
.dt-app .dt-page-hero__sub { color: var(--muted); margin-left: 0; }

.dt-app .dt-pagination .page-numbers { border-color: var(--line); color: var(--muted); font-family: var(--dt-mono); }
.dt-app .dt-pagination .page-numbers.current,
.dt-app .dt-pagination .page-numbers:hover { background: var(--fg); border-color: var(--fg); color: var(--ink); }

.dt-app .dt-prose { color: var(--muted); }
.dt-app .dt-prose h2, .dt-app .dt-prose h3, .dt-app .dt-prose h4 { color: var(--fg); font-family: var(--dt-display); }
.dt-app .dt-prose a { color: var(--m-image); }
.dt-app .dt-prose blockquote { border-left-color: var(--faint); background: var(--raised); color: var(--muted); }
.dt-app .dt-prose pre { background: #05070c; color: #d7deea; border: 1px solid var(--line); }
.dt-app .dt-prose code { background: var(--raised); color: var(--fg); }
.dt-app .dt-prose th { background: var(--raised); color: var(--fg); }
.dt-app .dt-prose th, .dt-app .dt-prose td { border-color: var(--line); }

/* --- Section / container helpers ------------------------------------------ */
.dt-section--tight { padding: 32px 0 56px; }
.dt-container--narrow { max-width: 760px; }

/* --- Directory layout: filters + results ---------------------------------- */
.dt-directory { display: grid; grid-template-columns: 236px 1fr; gap: 28px; align-items: start; }
.dt-directory__filters { position: sticky; top: 88px; }
.dt-directory__count { font-family: var(--dt-mono); font-size: 0.85rem; color: var(--muted); margin-bottom: 16px; }

/* Filter rail */
.dt-filter { border: 1px solid var(--line); border-radius: var(--ra-lg); background: var(--panel); overflow: hidden; }
.dt-filter__bar { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--line-soft); }
.dt-filter__title { font-family: var(--dt-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg); }
.dt-filter__toggle { display: none; background: var(--raised); color: var(--fg); border: 1px solid var(--line); border-radius: var(--ra); padding: 6px 12px; font-family: var(--dt-mono); font-size: 0.8rem; cursor: pointer; }
.dt-filter__body { padding: 6px 14px 14px; }
.dt-facet { border-bottom: 1px solid var(--line-soft); padding: 11px 0; }
.dt-facet:last-of-type { border-bottom: none; }
.dt-facet__label { font-family: var(--dt-mono); font-size: 0.85rem; color: var(--fg); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.dt-facet__label::after { content: '+'; color: var(--faint); }
.dt-facet[open] .dt-facet__label::after { content: '\2212'; }
.dt-facet__label::-webkit-details-marker { display: none; }
.dt-facet__options { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; max-height: 240px; overflow-y: auto; }
.dt-facet__opt { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--muted); cursor: pointer; }
.dt-facet__opt:hover { color: var(--fg); }
.dt-facet__opt input { accent-color: var(--mod, var(--focus)); flex: 0 0 auto; }
.dt-facet__opt .dt-mark { color: var(--mod, var(--muted)); flex: 0 0 auto; }
.dt-facet__name { flex: 1; }
.dt-facet__count { font-family: var(--dt-mono); font-size: 0.7rem; color: var(--faint); background: var(--raised); padding: 1px 7px; border-radius: 100px; }
.dt-filter__actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.dt-filter__clear { font-family: var(--dt-mono); font-size: 0.8rem; color: var(--faint); }
.dt-filter__clear:hover { color: var(--fg); }

/* --- Card grid ------------------------------------------------------------ */
.dt-card-grid--directory { grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 14px; }

/* Default modality accent; the .dt-m-* class (higher specificity) overrides it. */
.dt-card { --mod: var(--muted); }
.dt-app .dt-card {
	position: relative;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--ra-lg);
	overflow: hidden;
	transition: border-color .14s ease, transform .14s ease;
}
.dt-app .dt-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--mod); z-index: 2; }
.dt-app .dt-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--mod) 45%, var(--line)); }
.dt-app .dt-card.is-featured { border-color: color-mix(in srgb, var(--mod) 55%, var(--line)); box-shadow: none; }
.dt-app .dt-card__title a { color: var(--fg); }
.dt-app .dt-card__title a:hover { color: var(--mod); }
.dt-app .dt-card__excerpt { color: var(--muted); }

/* Whole-card click target is defined once on the base .dt-card in main.css
   (title link stretches over the card; chips/foot stay clickable on top). */

/* Entity (company / tool) cards */
.dt-card--entity .dt-card__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.dt-card__logo { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; background: var(--raised); }
.dt-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.dt-card__logo--ph { background: var(--raised); color: var(--fg); font-family: var(--dt-mono); font-weight: 700; font-size: 1.2rem; }
.dt-card__headings { flex: 1; min-width: 0; }
.dt-card__kicker { font-family: var(--dt-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--faint); }
.dt-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--line-soft); font-family: var(--dt-mono); font-size: 0.72rem; color: var(--faint); }
.dt-card__provider { color: var(--muted); }
.dt-card__provider:hover { color: var(--fg); }
.dt-card__license, .dt-card__pricing { background: var(--raised); color: color-mix(in srgb, var(--fg) 72%, var(--faint)); padding: 2px 8px; border-radius: 4px; }

/* Dataset cards — media forward */
.dt-card--dataset .dt-card__media { position: relative; display: block; height: 122px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line-soft); background: radial-gradient(120% 120% at 12% 0%, color-mix(in srgb, var(--mod) 20%, transparent), transparent 62%), color-mix(in srgb, var(--mod) 7%, var(--raised)); }
.dt-card--dataset .dt-card__media .dt-mark { color: var(--mod); }
.dt-card--dataset .dt-card__body { padding-top: 14px; }
.dt-card__mod { display: flex; align-items: center; gap: 7px; }
.dt-card__mod .dt-mark { color: var(--mod); }
.dt-modtag { font-family: var(--dt-mono); font-size: 0.64rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mod); }
.dt-card__spec { font-family: var(--dt-mono); font-size: 0.72rem; color: var(--faint); display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line-soft); font-variant-numeric: tabular-nums; }
.dt-card__spec .dt-sep { color: var(--line); }

/* --- Chips & badges ------------------------------------------------------- */
.dt-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.dt-chip {
	--mod: var(--muted);
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--dt-mono); font-size: 0.7rem; font-weight: 600;
	padding: 3px 9px 3px 7px; border-radius: 100px; line-height: 1.4;
	color: var(--mod);
	background: color-mix(in srgb, var(--mod) 13%, var(--panel));
	border: 1px solid color-mix(in srgb, var(--mod) 34%, transparent);
}
a.dt-chip:hover { filter: brightness(1.12); }
.dt-chip .dt-mark { color: var(--mod); flex: 0 0 auto; }

.dt-badge { display: inline-block; font-family: var(--dt-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; border: 1px solid var(--line); color: var(--muted); }
.dt-badge--featured { background: var(--fg); color: var(--ink); border-color: var(--fg); }
.dt-badge--oss { color: var(--m-text); border-color: color-mix(in srgb, var(--m-text) 40%, transparent); }
.dt-card--dataset .dt-badge--featured { position: absolute; top: 10px; right: 10px; }

.dt-provider-link { color: var(--muted); font-family: var(--dt-mono); }
.dt-provider-link:hover { color: var(--fg); }

/* --- Preview media -------------------------------------------------------- */
.dt-preview { position: relative; aspect-ratio: 3 / 2; overflow: hidden; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--mod, var(--muted)) 7%, var(--raised)); }
.dt-preview img { width: 100%; height: 100%; object-fit: cover; }
.dt-preview .dt-mark { color: var(--mod, var(--muted)); }
.dt-preview__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--mod, var(--muted)); background: radial-gradient(120% 120% at 15% 0%, color-mix(in srgb, var(--mod, var(--muted)) 22%, transparent), transparent 60%), color-mix(in srgb, var(--mod, var(--muted)) 8%, var(--raised)); }
.dt-preview__badge { position: absolute; top: 10px; left: 10px; font-family: var(--dt-mono); font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; background: color-mix(in srgb, var(--ink) 55%, transparent); color: var(--fg); border: 1px solid var(--line); backdrop-filter: blur(3px); }
.dt-preview__badge--play::before { content: '\25B6'; margin-right: 5px; font-size: 0.7em; }
.dt-preview__badge--audio::before { content: '\266A'; margin-right: 5px; }
.dt-preview__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; width: 100%; height: 100%; }
.dt-preview__grid img { width: 100%; height: 100%; object-fit: cover; }
.dt-preview__audio { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; background: linear-gradient(135deg, #1a2130, color-mix(in srgb, var(--mod, var(--m-audio)) 24%, #10141d)); }
.dt-waveform { width: 100%; max-width: 240px; height: 44px; }
.dt-waveform rect { fill: color-mix(in srgb, var(--mod, #ffffff) 65%, #ffffff); }
.dt-preview__audio audio { width: 100%; max-width: 320px; }
.dt-preview--single { aspect-ratio: 16 / 9; border-radius: var(--ra-lg); border: 1px solid var(--line); }
.dt-preview--single video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.dt-preview--single model-viewer { width: 100%; height: 100%; background: var(--raised); }
.dt-preview--single .dt-preview__grid { grid-template-columns: repeat(4, 1fr); }

/* --- Entity (single) pages ------------------------------------------------ */
.dt-entity { --mod: var(--muted); padding-bottom: 56px; }
.dt-entity__hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; margin: 22px 0 44px; }
.dt-entity__media { border: 1px solid var(--line); border-radius: var(--ra-lg); overflow: hidden; }
.dt-entity__title { font-family: var(--dt-mono); font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 700; color: var(--fg); letter-spacing: -0.025em; margin: 12px 0; line-height: 1.05; }
.dt-entity__lead { font-size: 1.12rem; color: var(--fg); margin-bottom: 16px; }
.dt-entity__provider { font-family: var(--dt-mono); font-size: 0.9rem; color: var(--muted); margin-bottom: 18px; }
.dt-entity__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.dt-entity__banner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 22px 0 36px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.dt-entity__logo { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; background: var(--raised); }
.dt-entity__logo img { width: 100%; height: 100%; object-fit: contain; }
.dt-entity__logo--ph { background: var(--raised); color: var(--fg); font-family: var(--dt-mono); font-size: 2rem; font-weight: 700; }
.dt-entity__banner-text { flex: 1; min-width: 240px; }
.dt-entity__banner-text .dt-chips { margin-top: 10px; }
.dt-entity__cta-btn { margin-left: auto; }
.dt-entity__layout { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.dt-entity__content .dt-chips { margin-top: 24px; }

.dt-metacard { position: sticky; top: 88px; border: 1px solid var(--line); border-radius: var(--ra-lg); padding: 22px; background: var(--panel); }
.dt-metacard__title { font-family: var(--dt-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg); margin-bottom: 16px; }
.dt-meta-list { display: flex; flex-direction: column; gap: 13px; }
.dt-meta-row { display: flex; flex-direction: column; gap: 4px; }
.dt-meta-row dt { font-family: var(--dt-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); }
.dt-meta-row dd { margin: 0; font-family: var(--dt-mono); font-size: 0.82rem; color: var(--fg); font-variant-numeric: tabular-nums; }
.dt-meta-row dd a { color: var(--m-image); }
.dt-metacard__cta { display: block; text-align: center; margin-top: 20px; }

.dt-citation { margin-top: 28px; }
.dt-citation summary { cursor: pointer; font-family: var(--dt-mono); font-weight: 600; color: var(--fg); }
.dt-citation pre { margin-top: 12px; background: #05070c; color: #d7deea; border: 1px solid var(--line); padding: 14px 16px; border-radius: var(--ra); overflow-x: auto; }

/* --- Related, newsletter, form, empty ------------------------------------ */
.dt-related { padding: 44px 0; border-top: 1px solid var(--line); }
.dt-related__title { font-family: var(--dt-mono); font-size: 1.15rem; color: var(--fg); letter-spacing: -0.01em; margin-bottom: 22px; }

.dt-newsletter { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--fg); padding: 48px 0; margin-top: 40px; }
.dt-newsletter__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.dt-newsletter__heading { font-family: var(--dt-mono); font-size: clamp(1.3rem, 3vw, 1.9rem); letter-spacing: -0.02em; margin-bottom: 8px; }
.dt-newsletter__sub { color: var(--muted); }
.dt-newsletter__iframe { width: 100%; min-height: 80px; border: 0; border-radius: var(--ra); background: transparent; }

.dt-submit { max-width: 640px; }
.dt-form { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
.dt-form__row { display: flex; flex-direction: column; gap: 6px; }
.dt-form__row label { font-family: var(--dt-mono); font-size: 0.82rem; color: var(--fg); }
.dt-form__row input, .dt-form__row select, .dt-form__row textarea {
	width: 100%; padding: 10px 14px; font-family: var(--dt-mono); font-size: 0.9rem;
	color: var(--fg); background: var(--raised); border: 1px solid var(--line); border-radius: var(--ra);
}
.dt-form__row input:focus, .dt-form__row select:focus, .dt-form__row textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
.dt-req { color: #ff8f8f; }
.dt-form__note { font-family: var(--dt-mono); font-size: 0.78rem; color: var(--faint); }
.dt-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dt-notice { padding: 13px 17px; border-radius: var(--ra); font-size: 0.9rem; margin-bottom: 8px; }
.dt-notice--success { background: color-mix(in srgb, var(--live) 16%, var(--panel)); color: var(--live); }
.dt-notice--error { background: color-mix(in srgb, #ff6b6b 16%, var(--panel)); color: #ff8f8f; }

.dt-empty { text-align: center; padding: 48px 24px; border: 1px dashed var(--line); border-radius: var(--ra-lg); color: var(--muted); }
.dt-empty p { margin-bottom: 16px; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 960px) {
	.dt-directory { grid-template-columns: 1fr; }
	.dt-directory__filters { position: static; }
	.dt-entity__hero { grid-template-columns: 1fr; }
	.dt-entity__layout { grid-template-columns: 1fr; }
	.dt-metacard { position: static; }
	.dt-newsletter__inner { grid-template-columns: 1fr; }
	.dt-filter__toggle { display: inline-block; }
	.dt-filter__body { display: none; }
	.dt-filter.is-open .dt-filter__body { display: block; }
}
@media (max-width: 768px) {
	.dt-card-grid--directory { grid-template-columns: 1fr; }
	.dt-entity__cta-btn { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.dt-app * { animation: none !important; transition: none !important; }
}

/* --- Homepage / directory landing ---------------------------------------- */
.dt-home .dt-hl { color: var(--m-multimodal); }
.dt-live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 22%, transparent); margin-right: 2px; vertical-align: middle; }

.dt-stats { display: flex; flex-wrap: wrap; margin-top: 40px; border: 1px solid var(--line); border-radius: var(--ra-lg); overflow: hidden; }
.dt-stat { flex: 1 1 150px; padding: 16px 20px; border-right: 1px solid var(--line-soft); }
.dt-stat:last-child { border-right: none; }
.dt-num { display: block; font-family: var(--dt-mono); font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--fg); }
.dt-stat .dt-eyebrow { display: block; margin-top: 2px; }

.dt-section__head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }

.dt-modkey { display: grid; grid-template-columns: repeat(9, 1fr); gap: 10px; margin-top: 14px; }
.dt-modkey__cell { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 12px 10px; border: 1px solid var(--line); border-radius: var(--ra-lg); background: var(--panel); transition: border-color .12s, background .12s, transform .12s; }
.dt-modkey__cell::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--mod, var(--muted)); }
.dt-modkey__cell:hover { border-color: color-mix(in srgb, var(--mod, var(--muted)) 55%, var(--line)); background: color-mix(in srgb, var(--mod, var(--muted)) 8%, var(--panel)); transform: translateY(-2px); }
.dt-modkey__mark { color: var(--mod, var(--muted)); }
.dt-modkey__name { font-family: var(--dt-mono); font-size: 0.72rem; color: var(--fg); line-height: 1.2; letter-spacing: -0.01em; }

@media (max-width: 960px) { .dt-modkey { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .dt-modkey { grid-template-columns: repeat(2, 1fr); } .dt-stat { flex-basis: 50%; } }