/* Specialties as a reel (решение 194): the sphere stays on the left, specialties scroll on the right;
   the row on the left title's line is bright, the rest are dimmed. */
.spx-showcase{grid-template-columns:minmax(260px,.8fr) minmax(0,1.4fr);gap:clamp(24px,3vw,44px);align-items:stretch;margin-top:42px}
.spx-media-home{position:sticky;top:var(--header-h,96px);height:calc(100dvh - var(--header-h,96px));min-width:0}
/* A larger illustration sits above the lower caption; its title still defines the reading line. */
.spx-preview{position:absolute;left:0;right:0;top:calc(50% + clamp(24px,8vh,72px));margin:0;min-width:0}
.spx-art{position:absolute;left:0;bottom:calc(100% + 22px);width:min(100%,clamp(220px,36vh,340px));aspect-ratio:1;border-radius:10px;isolation:isolate}
.spx-art-layer{position:absolute;inset:0;border-radius:10px;overflow:hidden;transform-origin:50% 55%}
.spx-art-layer svg,.spx-art-layer img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.spx-preview figcaption{padding:0}
.spx-preview-top{margin:0 0 8px!important;font-size:.68rem;font-weight:500;line-height:18px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.spx-preview-title{font-family:var(--font-display);font-size:clamp(1.6rem,2.7vw,2.45rem);font-weight:500;line-height:1.12;letter-spacing:-.035em;margin:0!important;color:var(--text)!important}
.spx-preview-meta{margin:12px 0 0!important;font-size:.78rem;color:var(--text-muted)}
.spx-preview-description{font-size:.83rem;line-height:1.6;margin:10px 0 0!important;color:var(--text-muted);max-width:34em}
.spx-preview-link{display:inline-block;margin-top:14px;font-size:.83rem;font-weight:500;color:var(--text);text-decoration:none;border-bottom:1px solid var(--border)}
.spx-preview-link:hover{border-color:var(--text)}
.spx-toolbar{display:flex;align-items:center;gap:12px;margin:0;padding:0 0 18px;border-bottom:1px solid var(--border)}
.spx-showcase .spx-filter{height:44px;flex:1;min-width:0;border-radius:6px;background:#f5f6f7}
.spx-jump select{height:44px;max-width:220px;padding:0 34px 0 14px;border:0;border-radius:6px;background:#f5f6f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23707072' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;font:inherit;font-size:.85rem;color:var(--text);appearance:none;cursor:pointer}
.spx-jump select:focus-visible{outline:2px solid var(--sky-strong);outline-offset:1px}
.spx-hint{margin:12px 0 0!important;font-size:.74rem;line-height:1.6;color:var(--text-muted)}
/* room below so the last rows can reach the reading line */
.spx-showcase #spx-results{padding-bottom:calc(50dvh - 60px)}
.spx-showcase .spx-sphere{padding:0;border:0;scroll-margin-top:calc(var(--header-h,96px) + 20px)}
.spx-group{margin:44px 0 6px;font-family:var(--font-sans);font-size:.68rem;font-weight:500;line-height:1.4;letter-spacing:.12em;text-transform:uppercase}
.spx-group a{color:var(--text-muted);text-decoration:none}
.spx-group a:hover{color:var(--text)}
.spx-showcase .spx-specs{display:block;margin:0}
.spx-showcase .spx-specs a{display:block;margin:0;padding:8px 0;border-radius:0;background:none;color:var(--text);text-decoration:none}
.spx-showcase .spx-specs a:hover{background:none}
.spx-showcase .spx-name{display:block;font-family:var(--font-display);font-size:clamp(1.3rem,2.3vw,2.05rem);font-weight:500;line-height:1.14;letter-spacing:-.035em;transition:color .28s ease}
.spx-showcase .spx-meta{display:block;margin-top:4px;font-size:.74rem;line-height:1.5;color:var(--text-muted);transition:opacity .28s ease}
.spx-scroll-ready .spx-specs a:not(.is-active) .spx-name{color:#cdd1d5}
.spx-scroll-ready .spx-specs a:not(.is-active) .spx-meta{opacity:.45}
/* under the cursor a row only darkens a little: the one bright row stays the one on the line */
.spx-scroll-ready .spx-specs a:not(.is-active):hover .spx-name{color:#9aa0a6}
.spx-showcase .spx-specs a:focus-visible .spx-name{color:var(--text)}
.spx-showcase .spx-specs a:focus-visible{outline:2px solid var(--sky-ink);outline-offset:4px;border-radius:4px}
.spx-showcase .spx-empty{padding:28px 0}
/* Две ступени (решение 201): сначала лента сфер, по нажатию — специальности одной сферы.
   Без JS строк сфер нет — список со всеми специальностями читается целиком. */
.spx-sphere-head,.spx-back{display:none}
.spx-preview-link[hidden]{display:none}
.spx-levels .spx-sphere-head{display:block;width:100%;margin:0;padding:8px 0;border:0;border-radius:0;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.spx-levels .spx-sphere-head .spx-meta::after{content:"";transition:opacity .28s ease}
.spx-levels .spx-sphere-head.is-active .spx-meta::after{content:"  ·  открыть специальности →";color:var(--text)}
.spx-scroll-ready .spx-sphere-head:not(.is-active) .spx-name{color:#cdd1d5}
.spx-scroll-ready .spx-sphere-head:not(.is-active) .spx-meta{opacity:.45}
.spx-scroll-ready .spx-sphere-head:not(.is-active):hover .spx-name{color:#9aa0a6}
.spx-levels .spx-sphere-head:focus-visible{outline:2px solid var(--sky-ink);outline-offset:4px;border-radius:4px}
.spx-levels .spx-sphere-head:focus-visible .spx-name{color:var(--text)}
.spx-levels:not(.is-open):not(.is-search) .spx-group,.spx-levels:not(.is-open):not(.is-search) .spx-specs{display:none}
.spx-levels.is-open .spx-sphere-head,.spx-levels.is-search .spx-sphere-head{display:none}
.spx-levels.is-open:not(.is-search) .spx-sphere:not(.is-opened),.spx-levels.is-open:not(.is-search) .spx-group{display:none}
.spx-levels.is-open:not(.is-search) .spx-back{display:inline-flex;flex:none;align-items:center;gap:6px;height:44px;padding:0 14px 0 10px;border:0;border-radius:6px;background:var(--text);color:#fff;font:inherit;font-size:.85rem;font-weight:500;cursor:pointer}
.spx-back .icon{rotate:90deg}
.spx-back:focus-visible{outline:2px solid var(--sky-strong);outline-offset:2px}
/* в списке сфер картинка крупная; открыли сферу — уменьшается и уходит влево, к подписи */
.spx-levels .spx-art{width:min(100%,clamp(240px,46vh,440px));transform-origin:0 100%;transition:scale .6s var(--ease-out,cubic-bezier(.22,1,.36,1))}
.spx-levels.is-open .spx-art,.spx-levels.is-search .spx-art{scale:.6}
@media(min-width:861px) and (max-height:760px){.spx-preview-description{display:none}}
@media(min-width:861px) and (max-height:620px){.spx-preview{top:calc(50% + 12px)}.spx-art{width:min(100%,30vh)}}
@media(max-width:1000px) and (min-width:861px){.spx-showcase{gap:28px;grid-template-columns:minmax(220px,.8fr) minmax(0,1.3fr)}}
@media(max-width:860px){
 .spx-showcase{display:block;margin-top:26px}
 .spx-media-home{position:sticky;top:var(--header-h,56px);z-index:5;height:auto;margin:0 -16px 8px;padding:12px 16px;background:rgba(255,255,255,.98);border-bottom:1px solid var(--border)}
 .spx-preview{position:static;display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:14px}
 .spx-art,.spx-levels .spx-art{position:relative;bottom:auto;width:88px;scale:1!important}
 .spx-preview-top{margin-bottom:2px!important;font-size:.58rem}
 .spx-preview-title{font-size:1.1rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .spx-preview-meta{margin-top:3px!important;font-size:.68rem}
 .spx-preview-description,.spx-preview-link{display:none}
 .spx-jump select{max-width:140px}
 .spx-levels.is-open:not(.is-search) .spx-jump{display:none}  /* «Все сферы» ведёт к выбору сферы — поиску нужно место */
 .spx-showcase .spx-name{font-size:1.25rem}
 .spx-showcase .spx-sphere{scroll-margin-top:calc(var(--header-h,56px) + 110px)}
}
/* «Наверх» на длинной ленте (решение 208): заметная тёмная кнопка с подписью вместо кружка */
.to-top{width:auto;height:46px;padding:0 18px 0 14px;display:flex;align-items:center;gap:8px;border:0;border-radius:999px;background:var(--text);color:#fff;font:inherit;font-size:.88rem;font-weight:500;box-shadow:0 12px 26px -14px rgba(11,11,11,.55)}
.to-top::after{content:"Наверх"}
.to-top.spx-top-on{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{border-color:transparent;background:var(--sky-ink);color:#fff}
.to-top:focus-visible{outline:2px solid var(--sky-strong);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.spx-showcase *{transition:none!important;animation:none!important}}