@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#070d15;--panel:#0a131d;--line:#20303d;--muted:#7b909f;--cyan:#73f5dc;--pink:#ef91c6}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#dce8ee;font:14px Manrope,Arial,sans-serif}body:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' filter='url(%23n)' opacity='.3' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}button,a,input{ -webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;background:none;border:0}button,a,input{outline-offset:5px}button:focus-visible,a:focus-visible{outline:2px solid var(--cyan)}a{color:inherit;text-decoration:none}header{height:91px;border-bottom:1px solid var(--line);padding:0 4.3%;display:flex;align-items:center;justify-content:space-between}.brand{font:700 22px 'Space Grotesk',sans-serif;letter-spacing:1px;position:relative;padding-left:43px}.brand>span:not(.brand-icon){color:var(--cyan)}.brand-icon{position:absolute;left:0;top:0;font-size:35px;color:var(--cyan)}.brand small{display:block;font:8px monospace;letter-spacing:2px;color:var(--muted);margin-top:6px}.header-right{display:flex;align-items:center;gap:35px;font:10px monospace;letter-spacing:1px}.online{color:var(--cyan)}.online i,.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--cyan);vertical-align:middle;margin-right:8px}.online i{box-shadow:0 0 10px var(--cyan)}.version{color:var(--muted);border-left:1px solid var(--line);padding-left:28px}.text-button{font:inherit}main{max-width:1600px;margin:auto;padding:0 4.3%}.intro{display:flex;justify-content:space-between;align-items:center;padding:53px 0 43px}.eyebrow,.micro{font:10px monospace;letter-spacing:2px;color:var(--cyan)}.eyebrow:before{content:'▰';margin-right:10px}h1{font-size:clamp(36px,4.3vw,65px);line-height:1.09;letter-spacing:-3px;margin:22px 0 19px;font-weight:500}h1 span{color:var(--cyan)}.intro p{font-size:13px;line-height:1.85;color:#91a5b3}.intro-right{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;padding:9px 0 22px}.coordinate{text-align:right;font:10px/1.9 monospace;letter-spacing:1px;color:#627887}.stats{display:flex;gap:40px}.stats>div{border-left:1px solid var(--line);padding-left:23px}.stats strong{font:400 43px 'Space Grotesk',sans-serif}.stats span{display:block;color:var(--muted);font:8px monospace;letter-spacing:1px;margin-top:10px}.workspace{border:1px solid #2c404b;background:#0a131b}.toolbar{padding:17px 22px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line);gap:15px;background:#0d1821}.tabs{display:flex;gap:7px}.tabs button{padding:12px 17px;color:#9aabb7;font-size:12px;white-space:nowrap;border:1px solid transparent}.tabs button.active{background:#15312e;border-color:#32665b;color:var(--cyan)}.tabs button span{font:10px monospace;margin-left:10px;opacity:.65}.closed{background:var(--pink)}.tools{display:flex;align-items:center;gap:12px}.search{display:flex;align-items:center;border:1px solid var(--line);padding:9px 12px;gap:8px}.search>span{font:24px/20px monospace;color:#91a5b3}.search input{background:none;border:0;width:180px;font:12px Manrope,Arial;color:white;outline:none}.search:focus-within{border-color:var(--cyan)}kbd{border:1px solid var(--line);font:10px monospace;padding:2px 5px;color:var(--muted)}#view{font-size:24px;border:1px solid var(--line);height:38px;width:40px}.filters{display:flex;align-items:center;gap:7px;padding:15px 23px;border-bottom:1px solid var(--line);flex-wrap:wrap}.filters>span{font:9px monospace;letter-spacing:1px;color:#607888;margin-right:16px}.filters button{font-size:10px;padding:6px 12px;border-radius:2px;color:#9aaebb}.filters button.active{background:#243640;color:#e3f3f6}.filters button:hover{color:var(--cyan)}#reset{margin-left:auto;color:#6f8797}.atlas{display:flex}.depth-nav{width:164px;flex-shrink:0;padding:31px 20px;display:flex;flex-direction:column;border-right:1px solid var(--line);background:#0a121b}.depth-nav .micro{color:var(--muted);font-size:9px}.depth-nav nav{margin-top:36px}.depth-nav nav button{position:relative;display:block;text-align:left;border-left:1px solid #344353;padding:0 0 38px 17px;width:100%;color:#74909f}.depth-nav nav button:before{content:'';width:5px;height:5px;background:#354755;position:absolute;left:-3px;top:4px}.depth-nav nav button.active{color:var(--cyan)}.depth-nav nav button.active:before{background:var(--cyan);box-shadow:0 0 9px #73f5dc}.depth-nav nav strong{display:block;font:12px monospace;margin-bottom:7px}.depth-nav nav small{font-size:9px}.nav-bottom{margin-top:auto;font:8px/2 monospace;letter-spacing:1px;color:#607887}.nav-bottom:first-line{font-size:23px}.ocean{position:relative;flex:1;min-width:0;overflow:hidden;background:radial-gradient(ellipse at 50% 24%,#10364055,transparent 60%),linear-gradient(#0a1721,#091523 48%,#080f1d);background-size:auto}.ocean:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#5c9dae09 1px,transparent 1px),linear-gradient(90deg,#5c9dae09 1px,transparent 1px);background-size:48px 48px;pointer-events:none}.map-top{position:relative;display:flex;justify-content:space-between;padding:22px 25px;font:8px monospace;letter-spacing:1.2px;color:#84a6b5;z-index:1}#iceberg{position:absolute;width:87%;height:calc(100% - 83px);left:7%;top:50px;filter:drop-shadow(0 0 20px #23d8db15);pointer-events:none}.waterline{position:absolute;top:266px;transition:top .2s;left:0;right:0;height:2px;box-shadow:0 0 19px #47e5e75c;background:linear-gradient(90deg,#45d1d54d,#97ffffa6,#45d1d54d);pointer-events:none}.waterline span{position:absolute;right:18px;top:9px;font:7px monospace;letter-spacing:1px;color:#5a8d9a}.level{position:relative;min-height:210px;padding:26px 30px 30px;border-bottom:1px dashed #46758327;scroll-margin-top:20px}.level:first-child{min-height:218px;padding-top:36px}.level-title{display:flex;align-items:center;gap:10px;color:#86a6b8;margin-bottom:24px;font:9px monospace;letter-spacing:1.4px}.level-title .number{font-size:9px;color:var(--cyan);border:1px solid #35575e;padding:3px 5px}.level-title .level-description{margin-left:auto;font:9px Manrope;letter-spacing:0;color:#648290}.nodes{display:flex;justify-content:center;gap:12px 14px;flex-wrap:wrap;max-width:90%;margin:auto}.node{background:#0b1825db;border:1px solid #34515f;border-radius:3px;padding:10px 13px;display:flex;align-items:center;gap:8px;box-shadow:0 4px 12px #0003;transition:transform .2s,border-color .2s,background .2s;text-align:left}.node:hover{transform:translateY(-3px);border-color:var(--cyan);background:#173743}.node .symbol{font:17px 'Space Grotesk',sans-serif;color:#bad5de}.node .name{font:500 12px 'Space Grotesk',Manrope,sans-serif;white-space:nowrap}.node .dot{width:4px;height:4px;margin:0 0 0 5px}.node .arrow{font-size:9px;color:#577482}.node[data-access="closed"]:hover{border-color:var(--pink)}.level:nth-child(1) .node{padding:12px 16px}.level:nth-child(1) .name{font-size:14px}.level:nth-child(5),.level:nth-child(6){background:#060e211a}.ocean-footer{position:relative;display:flex;justify-content:space-between;padding:22px 25px;color:#567487;font:8px monospace;letter-spacing:1px}.ocean-footer button{font:10px Manrope;color:#90aebc}footer{border-top:1px solid var(--line);padding:19px 24px;display:flex;justify-content:space-between;color:#8095a3;font:8px monospace;letter-spacing:.6px}footer .dot.closed{margin-left:20px}footer span:last-child{font:10px Manrope;letter-spacing:0}.page-bottom{display:flex;justify-content:space-between;gap:16px;padding:25px 0 30px;color:#627888;font:9px monospace}.page-bottom button{font:inherit}dialog{width:min(530px,calc(100% - 32px));background:linear-gradient(135deg,#142732,#0a131e);border:1px solid #486b78;color:#dce8ee;padding:39px;box-shadow:0 20px 100px #000b}dialog::backdrop{background:#01070cba;backdrop-filter:blur(7px)}.close{position:absolute;right:16px;top:10px;font:28px monospace;color:#93b0bc}dialog h2{font:500 34px 'Space Grotesk',Manrope;margin:20px 0 8px}dialog p{font-size:13px;line-height:1.9;color:#9cb1be}dialog .badge{display:inline-block;padding:6px 9px;border:1px solid #36505e;font:10px monospace;margin:5px 6px 5px 0;color:var(--cyan)}dialog .badge.closed{color:var(--pink);background:none}.detail-meta{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:21px 0;margin:24px 0}.detail-meta small{display:block;color:#688898;font:9px monospace;margin-bottom:7px}.detail-meta strong{font-size:12px;font-weight:500}.primary{display:inline-block;background:var(--cyan);padding:13px 19px;color:#08231f;font-size:12px;font-weight:800}.source-note{font:9px/1.7 monospace;color:#6f8c9d;margin-top:16px}#empty{position:relative;text-align:center;padding:100px 20px;min-height:450px}#empty strong{font-size:25px}#empty p{color:var(--muted);margin-bottom:25px}.list-view #iceberg,.list-view .waterline{display:none}.list-view .nodes{max-width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.list-view .node{justify-content:flex-start}.list-view .node .dot{margin-left:auto}.list-view .level{min-height:0}.list-view .level:first-child{min-height:0}.node .category-tag{display:none}.list-view .node .category-tag{display:block;color:#7e9cab;font-size:9px;margin-top:4px}@media(min-width:1500px){.nodes{max-width:82%}.node{padding:12px 17px}.level{min-height:220px}.level:first-child{min-height:218px}}@media(max-width:1000px){.stats{gap:20px}.stats>div{padding-left:15px}.stats strong{font-size:34px}.header-right{gap:20px}.depth-nav{width:127px;padding:30px 13px}.node{padding:9px 11px}.nodes{max-width:100%;gap:10px}.toolbar{padding:12px}.tabs button{padding:10px}.search input{width:140px}.level{padding:24px 18px}.level-title .level-description{display:none}.level{min-height:230px}.level:first-child{min-height:218px}.page-bottom>span:nth-child(2){max-width:340px}.list-view .nodes{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){header{height:76px;padding:0 5%}.brand{font-size:19px}.brand small{font-size:6px}.header-right .online,.version{display:none}.header-right{font-size:9px}.intro{padding:35px 0 28px;display:block}h1{font-size:44px;letter-spacing:-2px}.intro p{font-size:12px}.coordinate{display:none}.intro-right{padding:15px 0 0}.stats{gap:0;justify-content:space-between}.stats>div{padding-left:15px}.stats strong{font-size:29px}.stats span{font-size:7px}.toolbar{flex-direction:column;gap:13px}.tabs{justify-content:space-between;gap:0}.tabs button{font-size:10px;padding:10px 8px}.tabs button span{margin-left:3px}.tools{width:100%}.search{flex:1}.search input{width:100%;min-width:0}.filters{padding:12px;gap:3px}.filters>span{display:none}.filters button{font-size:9px;padding:7px 8px}.depth-nav{display:none}.map-top{font-size:7px;padding:19px 15px}.level{padding:22px 13px;min-height:270px}.level:first-child{min-height:236px}.waterline{top:281px}.level-title{font-size:8px;gap:8px;margin-bottom:23px}.node{padding:9px 10px;gap:6px}.node .name{font-size:11px}.level:nth-child(1) .node{padding:10px 11px}.level:nth-child(1) .name{font-size:12px}.node .symbol{font-size:14px}.nodes{gap:10px 8px}#iceberg{width:130%;left:-15%}footer{padding:17px 12px;gap:15px;flex-direction:column;font-size:7px}.ocean-footer{padding:20px 12px;font-size:6px}.ocean-footer button{font-size:8px}.page-bottom{flex-wrap:wrap;font-size:8px;line-height:1.8}.page-bottom>span:nth-child(2){order:3;max-width:none}.list-view .nodes{grid-template-columns:1fr 1fr}.list-view .node{padding:10px 7px}.list-view .node .name{font-size:10px}.list-view .node .symbol{display:none}dialog{padding:30px 24px}dialog h2{font-size:28px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}} 

/* ---- V.02: направления списком, дополнительные фильтры, подробное досье ---- */

.filter-row{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.filters button .symbol{margin-right:6px;opacity:.75}
.filters.modes{border-bottom:1px solid var(--line)}
.filters.modes button.mode{display:flex;align-items:center;gap:8px;border:1px solid #233642;padding:7px 12px;color:#93a9b6}
.filters.modes button.mode .box{width:10px;height:10px;border:1px solid #40586a;border-radius:1px;display:inline-block;margin:0}
.filters.modes button.mode.active{background:#15312e;border-color:#32665b;color:var(--cyan)}
.filters.modes button.mode.active .box{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 8px #73f5dc80}
.filters.modes em{font-style:normal;font:9px monospace;opacity:.6}
#reset[hidden]{display:none}

.node-body{display:flex;flex-direction:column;min-width:0}
.marks{display:flex;align-items:center;gap:5px;margin-left:5px}
.mark-sub{font-style:normal;font-size:11px;color:#f0c987}
.mark-ext{font-style:normal;font-size:10px;color:#7f96a5}
.node[data-status="extended"]{border-style:dashed;opacity:.86}
.node[data-status="extended"]:hover{opacity:1}
footer .mark-ext{margin-left:20px}

dialog{max-height:86vh;overflow:hidden}
#detail-content{max-height:calc(86vh - 78px);overflow:auto;padding-right:6px}
dialog .dev{font:11px monospace;letter-spacing:1px;color:#7fa0b0;margin:0 0 14px}
.badges{margin-bottom:18px}
dialog .badge.quiet{color:#9fb6c2;border-color:#2c4250}
dialog .badge.sub{color:#f0c987;border-color:#6a5735}
dialog .badge.ext{color:#8fa6b4;border-color:#3a4c58;border-style:dashed}
.verdict{border-left:2px solid #2f5a5c;padding:2px 0 2px 16px;margin:18px 0}
.verdict.bad{border-left-color:#6b4155}
.verdict small{display:block;font:9px monospace;letter-spacing:1.4px;color:var(--cyan);margin-bottom:6px}
.verdict.bad small{color:var(--pink)}
.verdict p{margin:0;font-size:12.5px;line-height:1.8}
.detail-meta{grid-template-columns:1fr 1fr;gap:18px 20px}
.detail-meta.use{border-top:0;margin-top:-8px;padding-top:0}
.detail-meta strong{line-height:1.6;color:#cfe1e9}
.alt{margin:8px 0 20px}
.alt small{display:block;font:9px monospace;letter-spacing:1.4px;color:#688898;margin-bottom:9px}
.chip{display:inline-block;border:1px solid #36505e;padding:6px 10px;font-size:11px;margin:0 6px 6px 0;color:#bcd4de;border-radius:2px}
.chip:hover{border-color:var(--cyan);color:var(--cyan)}
.chip.dead{color:#7d94a1;border-style:dashed;cursor:default}
.links{display:flex;flex-direction:column;gap:1px;border-top:1px solid var(--line);padding-top:14px}
.links .link{display:flex;align-items:baseline;gap:10px;padding:9px 2px;font-size:12px;border-bottom:1px solid #17242e}
.links .link span{margin-left:auto;font:9px monospace;color:#6f8c9d}
.links .link:hover{color:var(--cyan)}
@media(max-width:700px){.detail-meta{grid-template-columns:1fr}.filters.modes button.mode{font-size:9px;padding:6px 9px}}

/* Род записи: оболочка и инструмент не должны выглядеть как отдельная сеть. */
.mark-kind{font-style:normal;font-size:10px;color:#8fb0c4}
footer .mark-kind{margin-left:20px}
dialog .badge.kind{color:#cfe4ec;border-color:#3d5766;background:#16242e}
dialog .badge.kind.other{color:#f0c987;border-color:#6a5735;background:#231d12}
.alt.runs{margin-top:-4px}
.node[data-kind="оболочка"] .symbol,.node[data-kind="инструмент"] .symbol,.node[data-kind="сервис"] .symbol{opacity:.55}

/* ================= ТЕЛЕФОН =================
   Три ряда фильтров занимали 344 пикселя из 760 — почти половину экрана, и
   карта начиналась там, где палец уже устал листать. Поэтому на узком экране
   каждый ряд превращается в одну строку с горизонтальной прокруткой: смахнул
   вбок — увидел остальные кнопки, и всё это помещается в одну высоту.
   Заодно кнопки подросли: 27 пикселей высоты — это меньше подушечки пальца. */
@media(max-width:700px){
  main{padding:0 3.5%}
  .intro{padding:26px 0 22px}
  h1{font-size:38px;letter-spacing:-1.6px;margin:16px 0 14px}
  .intro p{font-size:12.5px;line-height:1.7}
  .intro-right{padding:18px 0 0}
  .stats strong{font-size:26px}

  /* Ленты фильтров. Полоса прокрутки спрятана: на телефоне её всё равно не
     тащат мышью, а два лишних пикселя съедают высоту строки. */
  .toolbar{flex-direction:column-reverse;gap:10px;padding:12px 12px 10px}
  .tools{width:100%;gap:8px}
  .search{flex:1;padding:10px 12px}
  .search input{font-size:16px}      /* меньше 16px — и Safari приближает страницу при фокусе */
  .search kbd{display:none}
  #view{height:42px;width:46px;flex-shrink:0}
  .tabs{gap:6px;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;margin:0 -12px;padding:0 12px}
  .tabs button{flex:0 0 auto;font-size:12px;padding:10px 14px;min-height:38px;border:1px solid #223441}
  .filters{flex-wrap:nowrap;padding:10px 12px;gap:8px}
  .filter-row{flex-wrap:nowrap;overflow-x:auto;margin:0 -12px;padding:0 12px}
  .filters button{flex:0 0 auto;font-size:12px;padding:9px 13px;min-height:36px;white-space:nowrap}
  .filters.modes{flex-wrap:nowrap;overflow-x:auto;margin:0;padding:10px 12px}
  .filters.modes button.mode{flex:0 0 auto;font-size:11px;padding:9px 12px;min-height:36px;white-space:nowrap}
  #reset{flex:0 0 auto;margin-left:0;align-self:center}
  .tabs::-webkit-scrollbar,.filter-row::-webkit-scrollbar,.filters.modes::-webkit-scrollbar,.depth-nav::-webkit-scrollbar{display:none}
  .tabs,.filter-row,.filters.modes,.depth-nav{scrollbar-width:none}

  /* Навигация по глубине на телефоне раньше просто пропадала: уровней шесть,
     а перейти к нужному было нечем, кроме долгой прокрутки. Теперь она лежит
     над картой такой же лентой. */
  .atlas{flex-direction:column}
  .depth-nav{display:flex;flex-direction:row;width:auto;padding:0;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto}
  .depth-nav .micro,.nav-bottom{display:none}
  .depth-nav nav{margin:0;display:flex;width:100%}
  .depth-nav nav button{flex:0 0 auto;border-left:0;border-bottom:2px solid transparent;padding:11px 14px;width:auto;min-height:44px}
  .depth-nav nav button:before{display:none}
  .depth-nav nav button.active{border-bottom-color:var(--cyan);background:#0f2028}
  .depth-nav nav button[disabled]{opacity:.35}
  .depth-nav nav strong{font-size:11px;margin-bottom:3px}
  .depth-nav nav small{font-size:8px;color:#6e8896}

  /* Карта. Узлы крупнее — по ним попадают пальцем, а не курсором. */
  .level{padding:20px 12px;min-height:230px}
  .level:first-child{min-height:200px}
  .node{padding:11px 12px;min-height:44px}
  .node .name{font-size:12.5px}
  .nodes{gap:9px}
  .list-view .nodes{grid-template-columns:1fr}
  .list-view .node .symbol{display:block}
  .list-view .node .category-tag{font-size:10px}

  /* Досье во весь экран: читать паспорт модели в окошке на 320 пикселей
     невозможно, а закрывать удобнее большой кнопкой, а не крестиком в угол. */
  dialog{width:100%;max-width:100%;max-height:100%;height:100%;margin:0;padding:26px 18px 18px;border:0}
  #detail-content{max-height:calc(100% - 30px)}
  dialog h2{font-size:26px;margin:14px 0 6px}
  dialog p{font-size:13.5px}
  .verdict p{font-size:13px}
  .detail-meta strong{font-size:13px}
  .close{right:10px;top:6px;font-size:34px;padding:6px 10px}
  .chip{padding:9px 12px;font-size:12px}
  .links .link{padding:12px 2px;font-size:13px}
}

@media(max-width:380px){
  h1{font-size:33px}
  .stats strong{font-size:23px}
  .node .name{font-size:12px}
}

.only-phone{display:none}
@media(max-width:700px){
  .only-phone{display:flex;align-items:center;gap:6px}
  #filters-toggle{border:1px solid var(--line);padding:0 12px;height:42px;font-size:12px;color:#9aabb7;flex-shrink:0}
  #filters-toggle.has-active{border-color:#32665b;background:#15312e;color:var(--cyan)}
  #filters-toggle em{font-style:normal;font:10px monospace}
  #filters-toggle .caret{font-size:9px;transition:transform .2s}
  .filters-open #filters-toggle .caret{transform:rotate(180deg)}
  .toolbar .tabs,.filters.modes{display:none}
  .filters-open .tabs{display:flex}
  .filters-open .filters.modes{display:flex}
}

@media(max-width:700px){
  /* Карточки в две ровные колонки: при свободном переносе строки выходили
     рваными, потому что названия разной длины, и карта выглядела мусорной. */
  .nodes{display:grid;grid-template-columns:1fr 1fr;max-width:100%;gap:9px}
  .node{justify-content:flex-start}
  .node .node-body{flex:1;min-width:0}
  .node .name{white-space:normal;overflow-wrap:anywhere;line-height:1.25}
  .node .marks{margin-left:auto}
  /* Лента глубины прилипает к верху: иначе, уйдя на третий уровень, вернуться
     к нужному можно только долгой прокруткой обратно. */
  .depth-nav{position:sticky;top:0;z-index:4;background:#0a121b}
}

@media(max-width:700px){
  #empty{padding:56px 16px;min-height:280px}
  #empty strong{font-size:21px}
  .ocean-footer{flex-direction:column;gap:10px;align-items:flex-start}
  footer{gap:10px}
}

/* ================= ПОДБОР ПО ВИДЕОКАРТЕ =================
   Отдельный ряд, а не ещё одна кнопка в «Отборе»: это не «да/нет», а выбор
   из семи десятков карт, и он задаёт, что человек увидит на всей странице. */

.filters.gpu{gap:12px}
.filters.gpu select{background:#0d1a22;border:1px solid #2a3f4c;color:#cfe1e9;font:12px Manrope,Arial,sans-serif;padding:8px 10px;border-radius:2px;max-width:320px}
.filters.gpu select:hover{border-color:#3d6675}
.filters.gpu select:focus-visible{outline:2px solid var(--cyan)}
.filters.gpu #gpu-note{font-style:normal;font:9px monospace;letter-spacing:.5px;color:#7d93a1}
.filters.gpu #gpu-clear{margin-left:auto;color:#6f8797}
.filters.gpu #gpu-clear[hidden]{display:none}

#gpu-picks{border-bottom:1px solid var(--line);padding:20px 23px 22px;background:linear-gradient(#0c1a22,#0a141c)}
#gpu-picks[hidden]{display:none}
.picks-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:16px}
.picks-head small{display:block;font:9px monospace;letter-spacing:1.4px;color:var(--cyan);margin-bottom:7px}
.picks-head strong{font:500 17px 'Space Grotesk',Manrope,sans-serif}
.picks-head p{margin:0;font-size:11px;color:#8299a7;text-align:right;max-width:420px;line-height:1.7}
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:9px}
.pick{display:flex;align-items:flex-start;gap:10px;text-align:left;border:1px solid #2c4553;background:#0b1825;padding:11px 13px;border-radius:3px;transition:border-color .2s,background .2s}
.pick:hover{border-color:var(--cyan);background:#132c36}
.pick .symbol{font:17px 'Space Grotesk',sans-serif;color:#8fb9c4;line-height:1.2}
.pick-body{display:block;min-width:0}
.pick small{display:block;font:8px monospace;letter-spacing:1.3px;color:#688898;margin-bottom:5px}
.pick strong{display:block;font:500 13px 'Space Grotesk',Manrope,sans-serif}
.pick em{display:block;font-style:normal;font-size:10px;color:#85a3b1;margin-top:4px;line-height:1.5}
.picks-none{margin:14px 0 0;font-size:11px;line-height:1.7;color:#84919c}

/* Подпись сборки на карточке: «влезает» без уточнения, какая именно сборка,
   было бы обещанием, которого модель не держит. */
.node .fit{display:block;font:9px monospace;letter-spacing:.3px;color:var(--cyan);opacity:.85;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}

.runs-list{border-top:1px solid var(--line);padding-top:16px;margin:20px 0 4px}
.runs-list>small{display:block;font:9px monospace;letter-spacing:1.4px;color:#688898;margin-bottom:11px}
.run{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid #17242e;font-size:12px}
.run b{margin-left:auto;font:400 11px monospace;color:#a8c0cb;white-space:nowrap}
.run i{font-style:normal;font:9px monospace;letter-spacing:.6px;white-space:nowrap;min-width:76px;text-align:right}
.run i.yes{color:var(--cyan)}
.run i.no{color:var(--pink)}
.run.over{opacity:.55}

@media(max-width:700px){
  /* Ряд переносится, а не прокручивается: кнопка «показать все» уехала бы за
     край, и сбросить выбор карты стало бы нечем. */
  .filters.gpu{display:none;flex-wrap:wrap;gap:8px}
  .filters-open .filters.gpu{display:flex}
  .filters.gpu select{flex:1 1 100%;font-size:16px;min-height:42px;max-width:none;min-width:0}
  .filters.gpu #gpu-note{display:none}
  .filters.gpu #gpu-clear{flex:0 0 auto;min-height:42px;font-size:11px}
  #gpu-picks{padding:16px 12px}
  .picks-head{display:block}
  .picks-head p{text-align:left;max-width:none;margin-top:9px}
  .picks{grid-template-columns:1fr 1fr;gap:7px}
  .pick{padding:10px}
  .pick .symbol{display:none}
  .pick strong{font-size:12px}
  .run i{min-width:64px}
}