@eveshipfit/ui-ingame 1.13.0 → 1.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.mjs +951 -596
  2. package/dist/style.css +1310 -1254
  3. package/package.json +3 -3
package/dist/style.css CHANGED
@@ -959,6 +959,13 @@
959
959
  outline: none;
960
960
  }
961
961
 
962
+ .BL_QfG_menu > button:disabled {
963
+ color: var(--esf-text-muted);
964
+ cursor: default;
965
+ opacity: .6;
966
+ background: none;
967
+ }
968
+
962
969
  .BL_QfG_icon {
963
970
  height: calc(16 * var(--menu-unit));
964
971
  width: calc(16 * var(--menu-unit));
@@ -1410,243 +1417,222 @@
1410
1417
  height: calc(15.5 * var(--service-unit));
1411
1418
  width: calc(15.5 * var(--service-unit));
1412
1419
  }
1413
- .TufZMa_card {
1414
- --info-unit: calc(1px * var(--esf-scale, 1));
1415
- background: var(--esf-bg);
1416
- border: 1px solid var(--esf-border);
1417
- box-shadow: 0 calc(8 * var(--info-unit)) calc(30 * var(--info-unit)) #0009;
1418
- box-sizing: border-box;
1420
+ .xFSZwa_browser {
1421
+ --browser-unit: calc(1px * var(--esf-scale, 1));
1419
1422
  color: var(--esf-text);
1420
1423
  font-family: var(--esf-font);
1421
1424
  font-size: calc(var(--esf-font-size) * var(--esf-scale, 1));
1422
- max-height: min(calc(460 * var(--info-unit)), calc(100vh - 16px));
1423
- padding: calc(10 * var(--info-unit)) calc(12 * var(--info-unit)) calc(6 * var(--info-unit));
1424
- user-select: text;
1425
- width: calc(330 * var(--info-unit));
1425
+ user-select: none;
1426
+ height: 100%;
1427
+ width: calc(393 * var(--browser-unit));
1426
1428
  flex-direction: column;
1427
- margin: auto;
1428
- inset: 0;
1429
+ display: flex;
1429
1430
  }
1430
1431
 
1431
- .TufZMa_card:popover-open {
1432
+ .xFSZwa_tabs {
1433
+ --corner: calc(6 * var(--browser-unit));
1434
+ clip-path: polygon(0 0,
1435
+ 100% 0,
1436
+ 100% calc(100% - var(--corner)),
1437
+ calc(100% - var(--corner)) 100%,
1438
+ var(--corner) 100%,
1439
+ 0 calc(100% - var(--corner)));
1440
+ gap: calc(4 * var(--browser-unit));
1432
1441
  display: flex;
1433
1442
  }
1434
1443
 
1435
- .TufZMa_card[data-side] {
1436
- margin: 0 calc(8 * var(--info-unit));
1437
- position-anchor: var(--item-info-anchor);
1438
- position-try-fallbacks: flip-block,
1439
- flip-inline,
1440
- flip-block flip-inline;
1441
- inset: auto;
1444
+ .xFSZwa_tab {
1445
+ background: var(--esf-tab);
1446
+ color: inherit;
1447
+ cursor: default;
1448
+ font: inherit;
1449
+ height: calc(24 * var(--browser-unit));
1450
+ border: none;
1451
+ flex: 1;
1452
+ padding: 0;
1442
1453
  }
1443
1454
 
1444
- .TufZMa_card[data-side="left"] {
1445
- position-area: left span-bottom;
1455
+ .xFSZwa_tab[aria-selected="true"] {
1456
+ background: var(--esf-tab-active);
1446
1457
  }
1447
1458
 
1448
- .TufZMa_card[data-side="right"] {
1449
- position-area: right span-bottom;
1459
+ .xFSZwa_tab:focus-visible, .xFSZwa_collapse:focus-visible {
1460
+ outline: var(--browser-unit) solid var(--esf-text);
1450
1461
  }
1451
1462
 
1452
- .TufZMa_close {
1453
- cursor: pointer;
1454
- opacity: .6;
1455
- right: calc(8 * var(--info-unit));
1456
- top: calc(8 * var(--info-unit));
1457
- background: none;
1458
- border: none;
1459
- padding: 0;
1460
- display: flex;
1461
- position: absolute;
1463
+ .xFSZwa_tab:focus-visible {
1464
+ outline-offset: calc(-1 * var(--browser-unit));
1462
1465
  }
1463
1466
 
1464
- .TufZMa_close:hover, .TufZMa_close:focus-visible {
1465
- opacity: 1;
1467
+ .xFSZwa_panel {
1468
+ flex-direction: column;
1469
+ flex: 1;
1470
+ min-height: 0;
1471
+ display: flex;
1466
1472
  }
1467
1473
 
1468
- .TufZMa_close > img {
1469
- height: calc(14 * var(--info-unit));
1470
- width: calc(14 * var(--info-unit));
1474
+ .xFSZwa_panel[hidden] {
1475
+ display: none;
1471
1476
  }
1472
1477
 
1473
- .TufZMa_header {
1478
+ .xFSZwa_search {
1479
+ height: calc(32 * var(--browser-unit));
1480
+ margin-top: calc(8 * var(--browser-unit));
1474
1481
  align-items: center;
1475
- gap: calc(10 * var(--info-unit));
1476
- padding-right: calc(16 * var(--info-unit));
1477
1482
  display: flex;
1478
1483
  }
1479
1484
 
1480
- .TufZMa_typeIcon {
1481
- height: calc(64 * var(--info-unit));
1482
- width: calc(64 * var(--info-unit));
1483
- flex: none;
1484
- }
1485
-
1486
- .TufZMa_typeIcon > span {
1487
- width: 100%;
1488
- height: 100%;
1489
- display: block;
1485
+ .xFSZwa_collapse {
1486
+ cursor: pointer;
1487
+ opacity: .6;
1488
+ width: calc(28 * var(--browser-unit));
1489
+ background: none;
1490
+ border: none;
1491
+ justify-content: center;
1492
+ padding: 0;
1493
+ display: flex;
1490
1494
  }
1491
1495
 
1492
- .TufZMa_title {
1493
- gap: calc(2 * var(--info-unit));
1494
- flex-direction: column;
1495
- min-width: 0;
1496
- display: flex;
1496
+ .xFSZwa_collapse:hover, .xFSZwa_collapse:focus-visible {
1497
+ opacity: 1;
1497
1498
  }
1498
1499
 
1499
- .TufZMa_name {
1500
- font-size: inherit;
1501
- margin: 0;
1502
- font-weight: normal;
1500
+ .xFSZwa_collapse > img {
1501
+ height: calc(14 * var(--browser-unit));
1502
+ width: calc(14 * var(--browser-unit));
1503
1503
  }
1504
1504
 
1505
- .TufZMa_muted {
1506
- color: var(--esf-text-muted);
1505
+ .xFSZwa_field > img {
1506
+ height: calc(16 * var(--browser-unit));
1507
+ opacity: .5;
1508
+ width: calc(16 * var(--browser-unit));
1507
1509
  }
1508
1510
 
1509
- .TufZMa_tabs {
1510
- border-bottom: 1px solid var(--esf-input-border);
1511
- gap: calc(16 * var(--info-unit));
1512
- margin-top: calc(8 * var(--info-unit));
1511
+ .xFSZwa_field {
1512
+ background: var(--esf-input-bg);
1513
+ border: var(--browser-unit) solid var(--esf-input-border);
1514
+ align-self: stretch;
1515
+ align-items: center;
1516
+ gap: calc(5 * var(--browser-unit));
1517
+ padding-left: calc(12 * var(--browser-unit));
1518
+ flex: 1;
1513
1519
  display: flex;
1514
1520
  }
1515
1521
 
1516
- .TufZMa_tab {
1517
- color: var(--esf-text-muted);
1522
+ .xFSZwa_field > input {
1523
+ color: inherit;
1518
1524
  font: inherit;
1519
- padding: calc(4 * var(--info-unit)) 0 calc(6 * var(--info-unit));
1520
1525
  background: none;
1521
1526
  border: none;
1527
+ outline: none;
1528
+ flex: 1;
1529
+ min-width: 0;
1530
+ padding: 0;
1522
1531
  }
1523
1532
 
1524
- .TufZMa_tab[aria-selected="true"] {
1525
- box-shadow: inset 0 calc(-2 * var(--info-unit)) var(--esf-button-active-edge);
1526
- color: var(--esf-text);
1533
+ .xFSZwa_field > input::placeholder {
1534
+ color: var(--esf-text-muted);
1527
1535
  }
1528
1536
 
1529
- .TufZMa_panel {
1530
- flex-direction: column;
1531
- min-height: 0;
1537
+ .xFSZwa_field:focus-within {
1538
+ border-color: var(--esf-text-muted);
1539
+ }
1540
+
1541
+ .xFSZwa_filters {
1542
+ gap: calc(4 * var(--browser-unit));
1543
+ margin: calc(4 * var(--browser-unit)) 0 0;
1544
+ border: none;
1545
+ min-width: 0;
1546
+ padding: 0;
1532
1547
  display: flex;
1533
1548
  }
1534
1549
 
1535
- .TufZMa_list {
1536
- font-size: calc(11 * var(--info-unit));
1537
- margin: calc(4 * var(--info-unit)) calc(-12 * var(--info-unit)) 0;
1550
+ .xFSZwa_tree {
1551
+ margin-top: calc(8 * var(--browser-unit));
1552
+ flex: 1;
1538
1553
  min-height: 0;
1539
- padding: 0;
1540
- list-style: none;
1541
1554
  overflow-y: auto;
1542
1555
  }
1543
1556
 
1544
- .TufZMa_row {
1545
- align-items: center;
1546
- gap: calc(8 * var(--info-unit));
1547
- min-height: calc(26 * var(--info-unit));
1548
- padding: 0 calc(12 * var(--info-unit));
1549
- justify-content: space-between;
1550
- display: flex;
1557
+ .xFSZwa_empty {
1558
+ color: var(--esf-text-muted);
1559
+ font-size: calc(20 * var(--browser-unit));
1560
+ margin: calc(24 * var(--browser-unit)) 0 0;
1561
+ text-align: center;
1551
1562
  }
1552
1563
 
1553
- .TufZMa_row:hover {
1554
- background: var(--esf-tree-hover);
1564
+ .xFSZwa_hull {
1565
+ font-weight: 600;
1555
1566
  }
1556
1567
 
1557
- .TufZMa_row > dt {
1568
+ .xFSZwa_counts {
1569
+ display: flex;
1570
+ }
1571
+
1572
+ .xFSZwa_count {
1558
1573
  align-items: center;
1559
- gap: calc(6 * var(--info-unit));
1560
- min-width: 0;
1574
+ gap: calc(3 * var(--browser-unit));
1575
+ min-width: calc(39 * var(--browser-unit));
1561
1576
  display: flex;
1562
1577
  }
1563
1578
 
1564
- .TufZMa_row > dt > span:last-child {
1565
- text-overflow: ellipsis;
1579
+ .xFSZwa_count > img, .xFSZwa_kind > img {
1580
+ height: calc(12 * var(--browser-unit));
1581
+ width: calc(12 * var(--browser-unit));
1582
+ display: block;
1583
+ }
1584
+
1585
+ .xFSZwa_unseen {
1586
+ clip-path: inset(50%);
1566
1587
  white-space: nowrap;
1588
+ width: 1px;
1589
+ height: 1px;
1590
+ position: absolute;
1567
1591
  overflow: hidden;
1568
1592
  }
1569
1593
 
1570
- .TufZMa_row > dd {
1571
- font-variant-numeric: tabular-nums;
1572
- text-align: right;
1573
- white-space: nowrap;
1574
- margin: 0;
1594
+ .xFSZwa_kind {
1595
+ margin-right: calc(5 * var(--browser-unit));
1596
+ vertical-align: middle;
1597
+ display: inline-block;
1575
1598
  }
1576
1599
 
1577
- .TufZMa_icon {
1578
- height: calc(16 * var(--info-unit));
1579
- width: calc(16 * var(--info-unit));
1600
+ .xFSZwa_flyable {
1601
+ background: var(--esf-flyable);
1602
+ height: calc(12 * var(--browser-unit));
1603
+ mask: var(--texture) center / 100% 100%;
1604
+ width: calc(12 * var(--browser-unit));
1580
1605
  flex: none;
1581
1606
  }
1582
1607
 
1583
- .TufZMa_row > dd[data-change="better"] {
1584
- color: var(--esf-good);
1608
+ .xFSZwa_flyable[data-missing] {
1609
+ background: var(--esf-not-flyable);
1585
1610
  }
1586
1611
 
1587
- .TufZMa_row > dd[data-change="worse"] {
1588
- color: var(--esf-bad);
1612
+ .xFSZwa_simulate {
1613
+ cursor: pointer;
1614
+ opacity: .9;
1615
+ background: none;
1616
+ border: none;
1617
+ flex: none;
1618
+ padding: 0;
1619
+ display: flex;
1589
1620
  }
1590
1621
 
1591
- .TufZMa_metaGroup {
1592
- background: var(--esf-tree-header);
1593
- font-size: inherit;
1594
- margin: calc(4 * var(--info-unit)) 0 0;
1595
- padding: calc(5 * var(--info-unit)) calc(12 * var(--info-unit));
1596
- font-weight: normal;
1622
+ .xFSZwa_simulate:hover, .xFSZwa_simulate:focus-visible {
1623
+ opacity: 1;
1597
1624
  }
1598
1625
 
1599
- .TufZMa_variations {
1600
- margin: 0;
1601
- padding: 0;
1602
- list-style: none;
1603
- }
1604
-
1605
- .TufZMa_row[aria-current="true"] {
1606
- background: var(--esf-tab-active);
1607
- }
1608
-
1609
- .TufZMa_variation {
1610
- color: inherit;
1611
- cursor: default;
1612
- font: inherit;
1613
- align-items: center;
1614
- gap: calc(6 * var(--info-unit));
1615
- text-align: left;
1616
- user-select: none;
1617
- background: none;
1618
- border: none;
1619
- outline: none;
1620
- flex: 1;
1621
- min-width: 0;
1622
- padding: 0;
1623
- display: flex;
1624
- }
1625
-
1626
- .TufZMa_variation > span:last-child {
1627
- text-overflow: ellipsis;
1628
- white-space: nowrap;
1629
- overflow: hidden;
1630
- }
1631
-
1632
- .TufZMa_row:has(.TufZMa_variation:focus-visible) {
1633
- background: var(--esf-tree-hover);
1634
- }
1635
-
1636
- .TufZMa_variationIcon {
1637
- height: calc(24 * var(--info-unit));
1638
- width: calc(24 * var(--info-unit));
1639
- flex: none;
1626
+ .xFSZwa_simulate:focus-visible {
1627
+ outline: var(--browser-unit) solid var(--esf-text);
1640
1628
  }
1641
1629
 
1642
- .TufZMa_variationIcon > span {
1643
- width: 100%;
1644
- height: 100%;
1645
- display: block;
1630
+ .xFSZwa_simulate > img {
1631
+ height: calc(22 * var(--browser-unit));
1632
+ width: calc(22 * var(--browser-unit));
1646
1633
  }
1647
1634
 
1648
- .TufZMa_info {
1649
- cursor: pointer;
1635
+ .xFSZwa_info {
1650
1636
  opacity: .6;
1651
1637
  background: none;
1652
1638
  border: none;
@@ -1655,1655 +1641,1725 @@
1655
1641
  display: flex;
1656
1642
  }
1657
1643
 
1658
- .TufZMa_info:hover, .TufZMa_info:focus-visible {
1644
+ .xFSZwa_info:hover, .xFSZwa_info:focus-visible {
1659
1645
  opacity: 1;
1660
1646
  }
1661
1647
 
1662
- .TufZMa_info > img {
1663
- height: calc(16 * var(--info-unit));
1664
- width: calc(16 * var(--info-unit));
1665
- }
1666
- .yNZdnG_card {
1667
- max-height: none;
1668
- width: calc(460 * var(--info-unit));
1669
- overflow: visible;
1648
+ .xFSZwa_info:focus-visible {
1649
+ outline: var(--browser-unit) solid var(--esf-text);
1670
1650
  }
1671
1651
 
1672
- .yNZdnG_panel {
1673
- gap: calc(10 * var(--info-unit));
1674
- padding: calc(10 * var(--info-unit)) 0 calc(6 * var(--info-unit));
1675
- flex-direction: column;
1676
- display: flex;
1652
+ .xFSZwa_info > img {
1653
+ height: calc(16 * var(--browser-unit));
1654
+ width: calc(16 * var(--browser-unit));
1677
1655
  }
1678
1656
 
1679
- .yNZdnG_toolbar {
1680
- gap: calc(6 * var(--info-unit));
1681
- display: flex;
1682
- position: relative;
1657
+ .xFSZwa_dragImage {
1658
+ pointer-events: none;
1659
+ position: fixed;
1660
+ top: 0;
1661
+ left: -1000px;
1683
1662
  }
1684
1663
 
1685
- .yNZdnG_picker {
1686
- flex: 1;
1687
- min-width: 0;
1664
+ .xFSZwa_actions {
1665
+ gap: calc(8 * var(--browser-unit));
1666
+ margin-top: calc(8 * var(--browser-unit));
1667
+ display: flex;
1688
1668
  }
1689
1669
 
1690
- .yNZdnG_select {
1691
- background: var(--esf-input-bg);
1692
- border: 1px solid var(--esf-input-border);
1670
+ .xFSZwa_action {
1671
+ background: var(--esf-button);
1672
+ border: var(--browser-unit) solid var(--esf-button-edge);
1693
1673
  color: var(--esf-text);
1694
1674
  cursor: pointer;
1695
1675
  font: inherit;
1696
- align-items: center;
1697
- gap: calc(8 * var(--info-unit));
1698
- height: 100%;
1699
- padding: calc(5 * var(--info-unit)) calc(8 * var(--info-unit));
1700
- width: 100%;
1701
- display: flex;
1702
- }
1703
-
1704
- .yNZdnG_select:hover, .yNZdnG_select:focus-visible, .yNZdnG_select[aria-expanded="true"] {
1705
- border-color: var(--esf-text-muted);
1706
- outline: none;
1676
+ height: calc(32 * var(--browser-unit));
1677
+ min-width: calc(80 * var(--browser-unit));
1678
+ padding: 0 calc(16 * var(--browser-unit));
1707
1679
  }
1708
1680
 
1709
- .yNZdnG_selected {
1710
- text-align: left;
1711
- flex: 1;
1681
+ .xFSZwa_action:hover:not(:disabled), .xFSZwa_action:focus-visible {
1682
+ background: var(--esf-button-active);
1683
+ border-color: var(--esf-button-active-edge);
1712
1684
  }
1713
1685
 
1714
- .yNZdnG_caret {
1686
+ .xFSZwa_action:disabled {
1715
1687
  color: var(--esf-text-muted);
1688
+ cursor: default;
1716
1689
  }
1717
1690
 
1718
- .yNZdnG_roll {
1719
- flex: none;
1691
+ .xFSZwa_copyAnchor {
1692
+ anchor-name: --fit-copy;
1720
1693
  display: flex;
1721
1694
  }
1722
1695
 
1723
- .yNZdnG_more {
1724
- background: var(--esf-button);
1725
- border: 1px solid var(--esf-button-edge);
1726
- color: var(--esf-text-muted);
1727
- cursor: pointer;
1728
- font: inherit;
1729
- font-size: calc(10 * var(--info-unit));
1730
- padding: 0 calc(5 * var(--info-unit));
1731
- border-left: none;
1732
- }
1733
-
1734
- .yNZdnG_more:hover, .yNZdnG_more:focus-visible {
1735
- background: var(--esf-button-active);
1736
- border-color: var(--esf-button-active-edge);
1737
- color: var(--esf-text);
1738
- outline: none;
1739
- }
1740
-
1741
- .yNZdnG_dice {
1742
- background: var(--esf-button);
1743
- border: 1px solid var(--esf-button-edge);
1744
- color: var(--esf-text);
1745
- cursor: pointer;
1746
- width: calc(30 * var(--info-unit));
1747
- flex: none;
1696
+ .xFSZwa_copy {
1697
+ min-width: 0;
1698
+ width: calc(32 * var(--browser-unit));
1748
1699
  justify-content: center;
1749
1700
  align-items: center;
1701
+ padding: 0;
1750
1702
  display: flex;
1751
1703
  }
1752
1704
 
1753
- .yNZdnG_dice:hover, .yNZdnG_dice:focus-visible {
1754
- background: var(--esf-button-active);
1755
- border-color: var(--esf-button-active-edge);
1756
- outline: none;
1705
+ .xFSZwa_copy > img {
1706
+ height: calc(16 * var(--browser-unit));
1707
+ width: calc(16 * var(--browser-unit));
1757
1708
  }
1758
1709
 
1759
- .yNZdnG_dice > svg {
1760
- height: calc(16 * var(--info-unit));
1761
- width: calc(16 * var(--info-unit));
1710
+ .xFSZwa_copy:disabled > img {
1711
+ opacity: .4;
1762
1712
  }
1763
1713
 
1764
- .yNZdnG_menu {
1714
+ .xFSZwa_menu {
1765
1715
  background: var(--esf-menu-bg);
1766
- border: 1px solid var(--esf-border);
1767
- box-shadow: 0 calc(10 * var(--info-unit)) calc(30 * var(--info-unit)) #000c;
1768
- z-index: 1;
1769
- grid-template-columns: auto 1fr;
1770
- display: grid;
1771
- position: absolute;
1772
- top: calc(100% + 2px);
1773
- left: 0;
1774
- right: 0;
1775
- }
1776
-
1777
- .yNZdnG_options {
1778
- border-right: 1px solid var(--esf-input-border);
1779
- padding: calc(4 * var(--info-unit)) 0;
1780
- outline: none;
1781
- margin: 0;
1782
- list-style: none;
1716
+ border: var(--browser-unit) solid var(--esf-input-border);
1717
+ color: var(--esf-text);
1718
+ font-family: var(--esf-font);
1719
+ font-size: calc(var(--esf-font-size) * var(--esf-scale, 1));
1720
+ margin: calc(4 * var(--browser-unit)) 0;
1721
+ padding: calc(6 * var(--browser-unit)) 0;
1722
+ position-anchor: --fit-copy;
1723
+ position-area: top span-right;
1724
+ position-try-fallbacks: flip-block;
1725
+ inset: auto;
1783
1726
  }
1784
1727
 
1785
- .yNZdnG_option {
1786
- white-space: nowrap;
1787
- color: var(--esf-text);
1728
+ .xFSZwa_menu > button {
1729
+ color: inherit;
1788
1730
  cursor: pointer;
1789
1731
  font: inherit;
1732
+ padding: calc(5 * var(--browser-unit)) calc(16 * var(--browser-unit));
1790
1733
  text-align: left;
1791
- width: 100%;
1792
- padding: calc(5 * var(--info-unit)) calc(10 * var(--info-unit));
1793
1734
  background: none;
1794
1735
  border: none;
1795
- outline: none;
1736
+ width: 100%;
1796
1737
  display: block;
1797
1738
  }
1798
1739
 
1799
- .yNZdnG_option[data-active] {
1740
+ .xFSZwa_menu > button:hover, .xFSZwa_menu > button:focus-visible {
1800
1741
  background: var(--esf-menu-hover);
1742
+ outline: none;
1801
1743
  }
1802
1744
 
1803
- .yNZdnG_option[aria-checked="true"] {
1804
- box-shadow: inset calc(2 * var(--info-unit)) 0 var(--esf-button-active-edge);
1745
+ .xFSZwa_form {
1746
+ gap: calc(8 * var(--browser-unit));
1747
+ width: min(calc(420 * var(--browser-unit)), 80vw);
1748
+ flex-direction: column;
1749
+ display: flex;
1805
1750
  }
1806
1751
 
1807
- .yNZdnG_option:focus-visible {
1808
- outline: 1px solid var(--esf-button-active-edge);
1809
- outline-offset: -1px;
1752
+ .xFSZwa_form > label {
1753
+ color: var(--esf-text-muted);
1810
1754
  }
1811
1755
 
1812
- .yNZdnG_chart {
1813
- font-size: calc(10 * var(--info-unit));
1814
- gap: calc(7 * var(--info-unit));
1815
- padding: calc(8 * var(--info-unit)) calc(10 * var(--info-unit)) calc(6 * var(--info-unit));
1816
- flex-direction: column;
1817
- display: flex;
1756
+ .xFSZwa_form > input, .xFSZwa_form > textarea {
1757
+ background: var(--esf-input-bg);
1758
+ border: var(--browser-unit) solid var(--esf-input-border);
1759
+ color: var(--esf-text);
1760
+ font: inherit;
1818
1761
  }
1819
1762
 
1820
- .yNZdnG_chartTitle {
1821
- font-size: calc(11 * var(--info-unit));
1763
+ .xFSZwa_form > textarea {
1764
+ resize: vertical;
1765
+ font-family: ui-monospace, monospace;
1822
1766
  }
1823
1767
 
1824
- .yNZdnG_chartRow {
1825
- gap: calc(2 * var(--info-unit));
1826
- display: grid;
1768
+ .xFSZwa_importError {
1769
+ color: var(--esf-bad);
1770
+ margin: 0;
1827
1771
  }
1828
1772
 
1829
- .yNZdnG_chartName {
1830
- color: var(--esf-text-muted);
1831
- text-overflow: ellipsis;
1832
- white-space: nowrap;
1833
- overflow: hidden;
1773
+ .xFSZwa_confirm {
1774
+ max-width: min(calc(360 * var(--browser-unit)), 80vw);
1834
1775
  }
1835
1776
 
1836
- .yNZdnG_chartBar {
1837
- background: var(--esf-input-bg);
1838
- height: calc(12 * var(--info-unit));
1839
- position: relative;
1777
+ .xFSZwa_confirm > p {
1778
+ margin: 0 0 calc(12 * var(--browser-unit));
1840
1779
  }
1841
1780
 
1842
- .yNZdnG_chartBehind {
1843
- background: #ffffff14;
1844
- position: absolute;
1845
- inset-block: 0;
1781
+ .xFSZwa_dialogButtons {
1782
+ gap: calc(8 * var(--browser-unit));
1783
+ justify-content: flex-end;
1784
+ display: flex;
1846
1785
  }
1847
1786
 
1848
- .yNZdnG_chartRange {
1849
- --low: var(--esf-bad);
1850
- --high: var(--esf-good);
1851
- background: linear-gradient(90deg,
1852
- color-mix(in srgb, var(--low) 60%, transparent),
1853
- var(--esf-resistance-bg) var(--neutral),
1854
- color-mix(in srgb, var(--high) 60%, transparent));
1855
- inset-block: calc(2 * var(--info-unit));
1856
- position: absolute;
1787
+ .xFSZwa_views {
1788
+ margin: 0 0 0 calc(4 * var(--browser-unit));
1789
+ border: none;
1790
+ align-self: stretch;
1791
+ min-width: 0;
1792
+ padding: 0;
1793
+ display: flex;
1857
1794
  }
1858
1795
 
1859
- .yNZdnG_chartRange:not([data-up-is-good]) {
1860
- --low: var(--esf-good);
1861
- --high: var(--esf-bad);
1796
+ .xFSZwa_views button {
1797
+ align-items: center;
1862
1798
  }
1863
1799
 
1864
- .yNZdnG_chartBase {
1865
- background: var(--esf-text);
1866
- opacity: .8;
1867
- width: 1px;
1868
- position: absolute;
1869
- inset-block: -1px;
1800
+ .xFSZwa_views [aria-pressed="true"] {
1801
+ background: var(--esf-tab-active);
1802
+ opacity: 1;
1803
+ }
1804
+ .TufZMa_card {
1805
+ --info-unit: calc(1px * var(--esf-scale, 1));
1806
+ background: var(--esf-bg);
1807
+ border: 1px solid var(--esf-border);
1808
+ box-shadow: 0 calc(8 * var(--info-unit)) calc(30 * var(--info-unit)) #0009;
1809
+ box-sizing: border-box;
1810
+ color: var(--esf-text);
1811
+ font-family: var(--esf-font);
1812
+ font-size: calc(var(--esf-font-size) * var(--esf-scale, 1));
1813
+ max-height: min(calc(460 * var(--info-unit)), calc(100vh - 16px));
1814
+ padding: calc(10 * var(--info-unit)) calc(12 * var(--info-unit)) calc(6 * var(--info-unit));
1815
+ user-select: text;
1816
+ width: calc(330 * var(--info-unit));
1817
+ flex-direction: column;
1818
+ margin: auto;
1819
+ inset: 0;
1870
1820
  }
1871
1821
 
1872
- .yNZdnG_chartRoll {
1873
- background: var(--esf-text);
1874
- border: 1px solid var(--esf-bg);
1875
- height: calc(10 * var(--info-unit));
1876
- margin-left: calc(-3 * var(--info-unit));
1877
- top: calc(1 * var(--info-unit));
1878
- width: calc(6 * var(--info-unit));
1822
+ .TufZMa_card:popover-open {
1823
+ display: flex;
1824
+ }
1825
+
1826
+ .TufZMa_card[data-side] {
1827
+ margin: 0 calc(8 * var(--info-unit));
1828
+ position-anchor: var(--item-info-anchor);
1829
+ position-try-fallbacks: flip-block,
1830
+ flip-inline,
1831
+ flip-block flip-inline;
1832
+ inset: auto;
1833
+ }
1834
+
1835
+ .TufZMa_card[data-side="left"] {
1836
+ position-area: left span-bottom;
1837
+ }
1838
+
1839
+ .TufZMa_card[data-side="right"] {
1840
+ position-area: right span-bottom;
1841
+ }
1842
+
1843
+ .TufZMa_close {
1844
+ cursor: pointer;
1845
+ opacity: .6;
1846
+ right: calc(8 * var(--info-unit));
1847
+ top: calc(8 * var(--info-unit));
1848
+ background: none;
1849
+ border: none;
1850
+ padding: 0;
1851
+ display: flex;
1879
1852
  position: absolute;
1880
1853
  }
1881
1854
 
1882
- .yNZdnG_chartAxis {
1855
+ .TufZMa_close:hover, .TufZMa_close:focus-visible {
1856
+ opacity: 1;
1857
+ }
1858
+
1859
+ .TufZMa_close > img {
1860
+ height: calc(14 * var(--info-unit));
1861
+ width: calc(14 * var(--info-unit));
1862
+ }
1863
+
1864
+ .TufZMa_header {
1865
+ align-items: center;
1866
+ gap: calc(10 * var(--info-unit));
1867
+ padding-right: calc(16 * var(--info-unit));
1868
+ display: flex;
1869
+ }
1870
+
1871
+ .TufZMa_typeIcon {
1872
+ height: calc(64 * var(--info-unit));
1873
+ width: calc(64 * var(--info-unit));
1874
+ flex: none;
1875
+ }
1876
+
1877
+ .TufZMa_typeIcon > span {
1878
+ width: 100%;
1879
+ height: 100%;
1880
+ display: block;
1881
+ }
1882
+
1883
+ .TufZMa_title {
1884
+ gap: calc(2 * var(--info-unit));
1885
+ flex-direction: column;
1886
+ min-width: 0;
1887
+ display: flex;
1888
+ }
1889
+
1890
+ .TufZMa_name {
1891
+ font-size: inherit;
1892
+ margin: 0;
1893
+ font-weight: normal;
1894
+ }
1895
+
1896
+ .TufZMa_muted {
1883
1897
  color: var(--esf-text-muted);
1884
- font-size: calc(9 * var(--info-unit));
1885
- justify-content: space-between;
1898
+ }
1899
+
1900
+ .TufZMa_tabs {
1901
+ border-bottom: 1px solid var(--esf-input-border);
1902
+ gap: calc(16 * var(--info-unit));
1903
+ margin-top: calc(8 * var(--info-unit));
1886
1904
  display: flex;
1887
1905
  }
1888
1906
 
1889
- .yNZdnG_stats {
1907
+ .TufZMa_tab {
1908
+ color: var(--esf-text-muted);
1909
+ font: inherit;
1910
+ padding: calc(4 * var(--info-unit)) 0 calc(6 * var(--info-unit));
1911
+ background: none;
1912
+ border: none;
1913
+ }
1914
+
1915
+ .TufZMa_tab[aria-selected="true"] {
1916
+ box-shadow: inset 0 calc(-2 * var(--info-unit)) var(--esf-button-active-edge);
1917
+ color: var(--esf-text);
1918
+ }
1919
+
1920
+ .TufZMa_panel {
1921
+ flex-direction: column;
1922
+ min-height: 0;
1923
+ display: flex;
1924
+ }
1925
+
1926
+ .TufZMa_list {
1890
1927
  font-size: calc(11 * var(--info-unit));
1891
- gap: calc(4 * var(--info-unit)) calc(8 * var(--info-unit));
1892
- grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) calc(84 * var(--info-unit)) calc(44 * var(--info-unit));
1893
- display: grid;
1928
+ margin: calc(4 * var(--info-unit)) calc(-12 * var(--info-unit)) 0;
1929
+ min-height: 0;
1930
+ padding: 0;
1931
+ list-style: none;
1932
+ overflow-y: auto;
1894
1933
  }
1895
1934
 
1896
- .yNZdnG_stat {
1935
+ .TufZMa_row {
1897
1936
  align-items: center;
1898
- display: contents;
1937
+ gap: calc(8 * var(--info-unit));
1938
+ min-height: calc(26 * var(--info-unit));
1939
+ padding: 0 calc(12 * var(--info-unit));
1940
+ justify-content: space-between;
1941
+ display: flex;
1899
1942
  }
1900
1943
 
1901
- .yNZdnG_name {
1944
+ .TufZMa_row:hover {
1945
+ background: var(--esf-tree-hover);
1946
+ }
1947
+
1948
+ .TufZMa_row > dt {
1902
1949
  align-items: center;
1903
1950
  gap: calc(6 * var(--info-unit));
1904
1951
  min-width: 0;
1905
1952
  display: flex;
1906
1953
  }
1907
1954
 
1908
- .yNZdnG_icon {
1909
- height: calc(16 * var(--info-unit));
1910
- width: calc(16 * var(--info-unit));
1911
- flex: none;
1912
- }
1913
-
1914
- .yNZdnG_label {
1955
+ .TufZMa_row > dt > span:last-child {
1915
1956
  text-overflow: ellipsis;
1916
1957
  white-space: nowrap;
1917
1958
  overflow: hidden;
1918
1959
  }
1919
1960
 
1920
- .yNZdnG_slider {
1921
- --worse: var(--esf-bad);
1922
- --better: var(--esf-good);
1923
- --low: var(--worse);
1924
- --high: var(--better);
1925
- align-self: center;
1926
- display: flex;
1927
- position: relative;
1961
+ .TufZMa_row > dd {
1962
+ font-variant-numeric: tabular-nums;
1963
+ text-align: right;
1964
+ white-space: nowrap;
1965
+ margin: 0;
1928
1966
  }
1929
1967
 
1930
- .yNZdnG_slider:not([data-high-is-good]) {
1931
- --low: var(--better);
1932
- --high: var(--worse);
1968
+ .TufZMa_icon {
1969
+ height: calc(16 * var(--info-unit));
1970
+ width: calc(16 * var(--info-unit));
1971
+ flex: none;
1933
1972
  }
1934
1973
 
1935
- .yNZdnG_slider:after {
1936
- background: var(--esf-text);
1937
- content: "";
1938
- height: calc(14 * var(--info-unit));
1939
- left: var(--base);
1940
- pointer-events: none;
1941
- width: 1px;
1942
- position: absolute;
1943
- top: 50%;
1944
- translate: 0 -50%;
1974
+ .TufZMa_row > dd[data-change="better"] {
1975
+ color: var(--esf-good);
1945
1976
  }
1946
1977
 
1947
- .yNZdnG_slider > input {
1948
- appearance: none;
1949
- background: linear-gradient(90deg,
1950
- color-mix(in srgb, var(--low) 60%, transparent),
1951
- var(--esf-resistance-bg) var(--base),
1952
- color-mix(in srgb, var(--high) 60%, transparent));
1953
- cursor: pointer;
1954
- height: calc(4 * var(--info-unit));
1955
- margin: calc(8 * var(--info-unit)) 0;
1956
- width: 100%;
1978
+ .TufZMa_row > dd[data-change="worse"] {
1979
+ color: var(--esf-bad);
1957
1980
  }
1958
1981
 
1959
- .yNZdnG_slider > input::-webkit-slider-thumb {
1960
- appearance: none;
1961
- background: var(--esf-text);
1962
- border: 1px solid var(--esf-bg);
1963
- height: calc(14 * var(--info-unit));
1964
- width: calc(8 * var(--info-unit));
1982
+ .TufZMa_metaGroup {
1983
+ background: var(--esf-tree-header);
1984
+ font-size: inherit;
1985
+ margin: calc(4 * var(--info-unit)) 0 0;
1986
+ padding: calc(5 * var(--info-unit)) calc(12 * var(--info-unit));
1987
+ font-weight: normal;
1965
1988
  }
1966
1989
 
1967
- .yNZdnG_slider > input::-moz-range-thumb {
1968
- background: var(--esf-text);
1969
- border: 1px solid var(--esf-bg);
1970
- height: calc(14 * var(--info-unit));
1971
- width: calc(8 * var(--info-unit));
1972
- border-radius: 0;
1990
+ .TufZMa_variations {
1991
+ margin: 0;
1992
+ padding: 0;
1993
+ list-style: none;
1973
1994
  }
1974
1995
 
1975
- .yNZdnG_slider > input:focus-visible {
1976
- outline: 1px solid var(--esf-button-active-edge);
1977
- outline-offset: calc(4 * var(--info-unit));
1996
+ .TufZMa_row[aria-current="true"] {
1997
+ background: var(--esf-tab-active);
1978
1998
  }
1979
1999
 
1980
- .yNZdnG_value {
1981
- font-variant-numeric: tabular-nums;
1982
- text-align: right;
2000
+ .TufZMa_variation {
2001
+ color: inherit;
2002
+ cursor: default;
2003
+ font: inherit;
2004
+ align-items: center;
2005
+ gap: calc(6 * var(--info-unit));
2006
+ text-align: left;
2007
+ user-select: none;
2008
+ background: none;
2009
+ border: none;
2010
+ outline: none;
2011
+ flex: 1;
2012
+ min-width: 0;
2013
+ padding: 0;
2014
+ display: flex;
2015
+ }
2016
+
2017
+ .TufZMa_variation > span:last-child {
2018
+ text-overflow: ellipsis;
1983
2019
  white-space: nowrap;
2020
+ overflow: hidden;
1984
2021
  }
1985
2022
 
1986
- .yNZdnG_change {
1987
- color: var(--esf-text-muted);
1988
- font-variant-numeric: tabular-nums;
1989
- text-align: right;
2023
+ .TufZMa_row:has(.TufZMa_variation:focus-visible) {
2024
+ background: var(--esf-tree-hover);
1990
2025
  }
1991
2026
 
1992
- .yNZdnG_change[data-change="better"] {
1993
- color: var(--esf-good);
2027
+ .TufZMa_variationIcon {
2028
+ height: calc(24 * var(--info-unit));
2029
+ width: calc(24 * var(--info-unit));
2030
+ flex: none;
1994
2031
  }
1995
2032
 
1996
- .yNZdnG_change[data-change="worse"] {
1997
- color: var(--esf-bad);
2033
+ .TufZMa_variationIcon > span {
2034
+ width: 100%;
2035
+ height: 100%;
2036
+ display: block;
1998
2037
  }
1999
2038
 
2000
- .yNZdnG_button {
2001
- background: var(--esf-button);
2002
- border: 1px solid var(--esf-button-edge);
2003
- color: var(--esf-text);
2039
+ .TufZMa_info {
2004
2040
  cursor: pointer;
2005
- font: inherit;
2006
- padding: calc(4 * var(--info-unit)) calc(12 * var(--info-unit));
2041
+ opacity: .6;
2042
+ background: none;
2043
+ border: none;
2044
+ flex: none;
2045
+ padding: 0;
2046
+ display: flex;
2007
2047
  }
2008
2048
 
2009
- .yNZdnG_button:hover:not(:disabled), .yNZdnG_button:focus-visible {
2010
- background: var(--esf-button-active);
2011
- border-color: var(--esf-button-active-edge);
2049
+ .TufZMa_info:hover, .TufZMa_info:focus-visible {
2050
+ opacity: 1;
2012
2051
  }
2013
2052
 
2014
- .yNZdnG_button:disabled {
2015
- cursor: default;
2016
- opacity: .5;
2053
+ .TufZMa_info > img {
2054
+ height: calc(16 * var(--info-unit));
2055
+ width: calc(16 * var(--info-unit));
2056
+ }
2057
+ .yNZdnG_card {
2058
+ max-height: none;
2059
+ width: calc(460 * var(--info-unit));
2060
+ overflow: visible;
2017
2061
  }
2018
2062
 
2019
- .yNZdnG_import {
2020
- gap: calc(8 * var(--info-unit));
2063
+ .yNZdnG_panel {
2064
+ gap: calc(10 * var(--info-unit));
2065
+ padding: calc(10 * var(--info-unit)) 0 calc(6 * var(--info-unit));
2021
2066
  flex-direction: column;
2022
2067
  display: flex;
2023
2068
  }
2024
2069
 
2025
- .yNZdnG_import > .yNZdnG_button {
2026
- align-self: flex-start;
2070
+ .yNZdnG_toolbar {
2071
+ gap: calc(6 * var(--info-unit));
2072
+ display: flex;
2073
+ position: relative;
2027
2074
  }
2028
2075
 
2029
- .yNZdnG_field {
2030
- resize: vertical;
2076
+ .yNZdnG_picker {
2077
+ flex: 1;
2078
+ min-width: 0;
2079
+ }
2080
+
2081
+ .yNZdnG_select {
2031
2082
  background: var(--esf-input-bg);
2032
2083
  border: 1px solid var(--esf-input-border);
2033
2084
  color: var(--esf-text);
2085
+ cursor: pointer;
2034
2086
  font: inherit;
2035
- padding: calc(6 * var(--info-unit)) calc(8 * var(--info-unit));
2087
+ align-items: center;
2088
+ gap: calc(8 * var(--info-unit));
2089
+ height: 100%;
2090
+ padding: calc(5 * var(--info-unit)) calc(8 * var(--info-unit));
2091
+ width: 100%;
2092
+ display: flex;
2036
2093
  }
2037
2094
 
2038
- .yNZdnG_field:focus {
2095
+ .yNZdnG_select:hover, .yNZdnG_select:focus-visible, .yNZdnG_select[aria-expanded="true"] {
2039
2096
  border-color: var(--esf-text-muted);
2040
2097
  outline: none;
2041
2098
  }
2042
2099
 
2043
- .yNZdnG_error {
2044
- color: var(--esf-violation-error);
2045
- margin: 0;
2100
+ .yNZdnG_selected {
2101
+ text-align: left;
2102
+ flex: 1;
2046
2103
  }
2047
- .qMyuGa_bonuses {
2048
- --unit: var(--tooltip-unit, 1px);
2104
+
2105
+ .yNZdnG_caret {
2049
2106
  color: var(--esf-text-muted);
2050
- align-items: baseline;
2051
- column-gap: calc(8 * var(--unit));
2052
- max-height: min(calc(500 * var(--unit)), 60vh);
2053
- row-gap: calc(4 * var(--unit));
2054
- scrollbar-color: var(--esf-border) transparent;
2055
- scrollbar-width: thin;
2056
- grid-template-columns: auto 1fr;
2057
- line-height: 1.3;
2058
- display: grid;
2059
- overflow-y: auto;
2060
2107
  }
2061
2108
 
2062
- .qMyuGa_name {
2063
- color: var(--esf-text);
2064
- grid-column: 1 / -1;
2109
+ .yNZdnG_roll {
2110
+ flex: none;
2111
+ display: flex;
2065
2112
  }
2066
2113
 
2067
- .qMyuGa_header {
2068
- color: var(--esf-bonus-header);
2069
- margin-top: calc(6 * var(--unit));
2070
- grid-column: 1 / -1;
2071
- font-weight: 600;
2114
+ .yNZdnG_more {
2115
+ background: var(--esf-button);
2116
+ border: 1px solid var(--esf-button-edge);
2117
+ color: var(--esf-text-muted);
2118
+ cursor: pointer;
2119
+ font: inherit;
2120
+ font-size: calc(10 * var(--info-unit));
2121
+ padding: 0 calc(5 * var(--info-unit));
2122
+ border-left: none;
2072
2123
  }
2073
2124
 
2074
- .qMyuGa_value {
2075
- color: var(--esf-bonus-value);
2076
- text-align: right;
2077
- white-space: nowrap;
2078
- font-weight: 600;
2125
+ .yNZdnG_more:hover, .yNZdnG_more:focus-visible {
2126
+ background: var(--esf-button-active);
2127
+ border-color: var(--esf-button-active-edge);
2128
+ color: var(--esf-text);
2129
+ outline: none;
2079
2130
  }
2080
2131
 
2081
- .qMyuGa_bonuses [data-bold] {
2132
+ .yNZdnG_dice {
2133
+ background: var(--esf-button);
2134
+ border: 1px solid var(--esf-button-edge);
2082
2135
  color: var(--esf-text);
2083
- font-weight: 600;
2136
+ cursor: pointer;
2137
+ width: calc(30 * var(--info-unit));
2138
+ flex: none;
2139
+ justify-content: center;
2140
+ align-items: center;
2141
+ display: flex;
2084
2142
  }
2085
2143
 
2086
- .qMyuGa_bonuses [data-italic] {
2087
- font-style: italic;
2144
+ .yNZdnG_dice:hover, .yNZdnG_dice:focus-visible {
2145
+ background: var(--esf-button-active);
2146
+ border-color: var(--esf-button-active-edge);
2147
+ outline: none;
2088
2148
  }
2089
2149
 
2090
- .qMyuGa_bonuses [data-underline] {
2091
- text-decoration: underline;
2092
- }
2093
- .gVdevq_panel {
2094
- background: var(--esf-menu-bg);
2095
- border: var(--window-unit) solid var(--esf-input-border);
2096
- box-sizing: border-box;
2097
- color: var(--esf-text);
2098
- gap: calc(10 * var(--window-unit));
2099
- margin: calc(4 * var(--window-unit)) 0;
2100
- padding: calc(12 * var(--window-unit)) calc(2 * var(--window-unit));
2101
- position-anchor: var(--bay-anchor);
2102
- position-area: bottom span-right;
2103
- position-try-fallbacks: flip-block;
2104
- width: calc(370 * var(--window-unit));
2105
- justify-items: center;
2106
- inset: auto;
2150
+ .yNZdnG_dice > svg {
2151
+ height: calc(16 * var(--info-unit));
2152
+ width: calc(16 * var(--info-unit));
2107
2153
  }
2108
2154
 
2109
- .gVdevq_panel:popover-open {
2155
+ .yNZdnG_menu {
2156
+ background: var(--esf-menu-bg);
2157
+ border: 1px solid var(--esf-border);
2158
+ box-shadow: 0 calc(10 * var(--info-unit)) calc(30 * var(--info-unit)) #000c;
2159
+ grid-template-columns: minmax(0, max-content) minmax(calc(240 * var(--info-unit)), 1fr);
2160
+ z-index: 1;
2110
2161
  display: grid;
2162
+ position: absolute;
2163
+ top: calc(100% + 2px);
2164
+ left: 0;
2165
+ right: 0;
2111
2166
  }
2112
2167
 
2113
- .gVdevq_panel[data-empty] {
2114
- padding: calc(17 * var(--window-unit)) calc(20 * var(--window-unit));
2115
- width: auto;
2116
- }
2117
-
2118
- .gVdevq_list {
2119
- column-gap: calc(8 * var(--window-unit));
2120
- grid-template-columns: minmax(calc(62 * var(--window-unit)), max-content) auto 1fr auto;
2121
- max-height: calc(8 * 32 * var(--window-unit));
2122
- width: 100%;
2168
+ .yNZdnG_options {
2169
+ border-right: 1px solid var(--esf-input-border);
2170
+ padding: calc(4 * var(--info-unit)) 0;
2171
+ outline: none;
2123
2172
  margin: 0;
2124
- padding: 0;
2125
2173
  list-style: none;
2126
- display: grid;
2127
- overflow-y: auto;
2128
- }
2129
-
2130
- .gVdevq_row {
2131
- grid-column: 1 / -1;
2132
- grid-template-columns: subgrid;
2133
- height: calc(32 * var(--window-unit));
2134
- padding: 0 calc(8 * var(--window-unit));
2135
- align-items: center;
2136
- display: grid;
2137
- }
2138
-
2139
- .gVdevq_row:hover {
2140
- background: var(--esf-bay-row-hover);
2141
2174
  }
2142
-
2143
- .gVdevq_quantity {
2144
- border: var(--window-unit) solid transparent;
2145
- align-items: center;
2146
- column-gap: calc(8 * var(--window-unit));
2147
- padding: calc(5 * var(--window-unit)) calc(6 * var(--window-unit));
2148
- grid-template-columns: auto auto;
2149
- justify-self: end;
2150
- justify-items: center;
2151
- display: grid;
2152
- }
2153
-
2154
- .gVdevq_count {
2155
- appearance: textfield;
2156
- color: inherit;
2175
+
2176
+ .yNZdnG_option {
2177
+ color: var(--esf-text);
2178
+ cursor: pointer;
2157
2179
  font: inherit;
2158
- font-variant-numeric: tabular-nums;
2159
- text-align: right;
2180
+ text-align: left;
2181
+ width: 100%;
2182
+ padding: calc(5 * var(--info-unit)) calc(10 * var(--info-unit));
2160
2183
  background: none;
2161
2184
  border: none;
2162
- padding: 0;
2163
- }
2164
-
2165
- .gVdevq_count::-webkit-inner-spin-button {
2166
- appearance: none;
2167
- }
2168
-
2169
- .gVdevq_count:focus {
2170
2185
  outline: none;
2186
+ display: block;
2171
2187
  }
2172
2188
 
2173
- .gVdevq_times, .gVdevq_steps {
2174
- grid-area: 1 / 2;
2189
+ .yNZdnG_option[data-active] {
2190
+ background: var(--esf-menu-hover);
2175
2191
  }
2176
2192
 
2177
- .gVdevq_steps {
2178
- visibility: hidden;
2193
+ .yNZdnG_option[aria-checked="true"] {
2194
+ box-shadow: inset calc(2 * var(--info-unit)) 0 var(--esf-button-active-edge);
2179
2195
  }
2180
2196
 
2181
- .gVdevq_steps > button {
2182
- cursor: default;
2183
- opacity: .6;
2184
- background: none;
2185
- border: none;
2186
- padding: 0;
2187
- display: block;
2197
+ .yNZdnG_option:focus-visible {
2198
+ outline: 1px solid var(--esf-button-active-edge);
2199
+ outline-offset: -1px;
2188
2200
  }
2189
2201
 
2190
- .gVdevq_steps > button:hover {
2191
- opacity: 1;
2202
+ .yNZdnG_chart {
2203
+ font-size: calc(10 * var(--info-unit));
2204
+ gap: calc(7 * var(--info-unit));
2205
+ padding: calc(8 * var(--info-unit)) calc(10 * var(--info-unit)) calc(6 * var(--info-unit));
2206
+ flex-direction: column;
2207
+ display: flex;
2192
2208
  }
2193
2209
 
2194
- .gVdevq_steps img {
2195
- height: calc(8 * var(--window-unit));
2196
- width: calc(8 * var(--window-unit));
2197
- display: block;
2210
+ .yNZdnG_chartTitle {
2211
+ font-size: calc(11 * var(--info-unit));
2198
2212
  }
2199
2213
 
2200
- .gVdevq_quantity:hover, .gVdevq_quantity:focus-within {
2201
- border-color: var(--esf-spinner-edge);
2214
+ .yNZdnG_chartRow {
2215
+ gap: calc(2 * var(--info-unit));
2216
+ display: grid;
2202
2217
  }
2203
2218
 
2204
- .gVdevq_quantity:hover .gVdevq_times, .gVdevq_quantity:focus-within .gVdevq_times {
2205
- visibility: hidden;
2219
+ .yNZdnG_chartName {
2220
+ color: var(--esf-text-muted);
2221
+ text-overflow: ellipsis;
2222
+ white-space: nowrap;
2223
+ overflow: hidden;
2206
2224
  }
2207
2225
 
2208
- .gVdevq_quantity:hover .gVdevq_steps, .gVdevq_quantity:focus-within .gVdevq_steps {
2209
- visibility: visible;
2226
+ .yNZdnG_chartBar {
2227
+ background: var(--esf-input-bg);
2228
+ height: calc(12 * var(--info-unit));
2229
+ position: relative;
2210
2230
  }
2211
2231
 
2212
- .gVdevq_quantity:focus-within {
2213
- background: var(--esf-spinner-focus);
2214
- border-color: var(--esf-spinner-focus-edge);
2232
+ .yNZdnG_chartBehind {
2233
+ background: #ffffff14;
2234
+ position: absolute;
2235
+ inset-block: 0;
2215
2236
  }
2216
2237
 
2217
- .gVdevq_icon {
2218
- height: calc(24 * var(--window-unit));
2219
- width: calc(24 * var(--window-unit));
2238
+ .yNZdnG_chartRange {
2239
+ --low: var(--esf-bad);
2240
+ --high: var(--esf-good);
2241
+ background: linear-gradient(90deg,
2242
+ color-mix(in srgb, var(--low) 60%, transparent),
2243
+ var(--esf-resistance-bg) var(--neutral),
2244
+ color-mix(in srgb, var(--high) 60%, transparent));
2245
+ inset-block: calc(2 * var(--info-unit));
2246
+ position: absolute;
2220
2247
  }
2221
2248
 
2222
- .gVdevq_icon > span {
2223
- width: 100%;
2224
- height: 100%;
2225
- display: block;
2249
+ .yNZdnG_chartRange:not([data-up-is-good]) {
2250
+ --low: var(--esf-good);
2251
+ --high: var(--esf-bad);
2226
2252
  }
2227
2253
 
2228
- .gVdevq_middle {
2229
- gap: calc(6 * var(--window-unit));
2230
- min-width: 0;
2231
- display: grid;
2254
+ .yNZdnG_chartBase {
2255
+ background: var(--esf-text);
2256
+ opacity: .8;
2257
+ width: 1px;
2258
+ position: absolute;
2259
+ inset-block: -1px;
2232
2260
  }
2233
2261
 
2234
- .gVdevq_name {
2235
- text-align: center;
2236
- text-overflow: ellipsis;
2237
- white-space: nowrap;
2238
- overflow: hidden;
2262
+ .yNZdnG_chartRoll {
2263
+ background: var(--esf-text);
2264
+ border: 1px solid var(--esf-bg);
2265
+ height: calc(10 * var(--info-unit));
2266
+ margin-left: calc(-3 * var(--info-unit));
2267
+ top: calc(1 * var(--info-unit));
2268
+ width: calc(6 * var(--info-unit));
2269
+ position: absolute;
2239
2270
  }
2240
2271
 
2241
- .gVdevq_activeDrones {
2242
- padding-left: calc(8 * var(--window-unit));
2243
- justify-self: start;
2244
- font-weight: 600;
2272
+ .yNZdnG_chartAxis {
2273
+ color: var(--esf-text-muted);
2274
+ font-size: calc(9 * var(--info-unit));
2275
+ justify-content: space-between;
2276
+ display: flex;
2245
2277
  }
2246
2278
 
2247
- .gVdevq_panel[data-drones] .gVdevq_list {
2248
- grid-template-columns: minmax(calc(52 * var(--window-unit)), max-content) auto 1fr auto;
2249
- max-height: calc(5 * 64 * var(--window-unit));
2279
+ .yNZdnG_chip:focus-visible {
2280
+ outline: 1px solid var(--esf-text);
2250
2281
  }
2251
2282
 
2252
- .gVdevq_panel[data-drones] .gVdevq_row {
2253
- height: calc(64 * var(--window-unit));
2283
+ .yNZdnG_chips {
2284
+ gap: calc(4 * var(--info-unit));
2285
+ grid-template-columns: repeat(auto-fit, minmax(calc(68 * var(--info-unit)), 1fr));
2286
+ max-height: calc(128 * var(--info-unit));
2287
+ display: grid;
2288
+ overflow-y: auto;
2254
2289
  }
2255
2290
 
2256
- .gVdevq_panel[data-drones] .gVdevq_icon {
2257
- height: calc(60 * var(--window-unit));
2258
- width: calc(60 * var(--window-unit));
2291
+ .yNZdnG_chip {
2292
+ background: var(--esf-button);
2293
+ border: 1px solid var(--esf-button-edge);
2294
+ color: var(--esf-text-muted);
2295
+ cursor: pointer;
2296
+ font: inherit;
2297
+ font-size: calc(11 * var(--info-unit));
2298
+ gap: calc(2 * var(--info-unit));
2299
+ padding: calc(4 * var(--info-unit));
2300
+ justify-items: center;
2301
+ display: grid;
2259
2302
  }
2260
2303
 
2261
- .gVdevq_panel[data-drones] .gVdevq_name {
2262
- text-align: left;
2304
+ .yNZdnG_chip[data-launched] {
2305
+ color: var(--esf-text);
2263
2306
  }
2264
2307
 
2265
- .gVdevq_panel[data-fighters] {
2266
- padding: calc(12 * var(--window-unit));
2267
- width: auto;
2308
+ .yNZdnG_chip[aria-pressed="true"] {
2309
+ border-color: var(--esf-button-active-edge);
2310
+ box-shadow: inset 0 0 0 1px var(--esf-button-active-edge);
2268
2311
  }
2269
2312
 
2270
- .gVdevq_panel[data-fighters] .gVdevq_list {
2271
- width: calc(5 * 88 * var(--window-unit) - 2 * var(--window-unit));
2313
+ .yNZdnG_chipBar {
2314
+ background: var(--esf-input-bg);
2315
+ height: calc(3 * var(--info-unit));
2316
+ width: 100%;
2272
2317
  }
2273
2318
 
2274
- .gVdevq_kinds {
2275
- gap: calc(22 * var(--window-unit));
2276
- min-height: calc(16 * var(--window-unit));
2277
- padding-left: calc(4 * var(--window-unit));
2278
- justify-self: start;
2279
- display: flex;
2319
+ .yNZdnG_chipBar > span {
2320
+ background: var(--esf-button-active-edge);
2321
+ height: 100%;
2322
+ display: block;
2280
2323
  }
2281
2324
 
2282
- .gVdevq_kind {
2283
- align-items: baseline;
2284
- gap: calc(2 * var(--window-unit));
2285
- display: flex;
2325
+ .yNZdnG_stats {
2326
+ font-size: calc(11 * var(--info-unit));
2327
+ gap: calc(4 * var(--info-unit)) calc(8 * var(--info-unit));
2328
+ grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) calc(84 * var(--info-unit)) calc(44 * var(--info-unit));
2329
+ display: grid;
2286
2330
  }
2287
2331
 
2288
- .gVdevq_kind > img {
2289
- height: calc(16 * var(--window-unit));
2290
- translate: 0 calc(8 * var(--window-unit) - .5cap);
2291
- width: calc(16 * var(--window-unit));
2332
+ .yNZdnG_stat {
2333
+ align-items: center;
2334
+ display: contents;
2292
2335
  }
2293
2336
 
2294
- .gVdevq_tubes {
2295
- gap: calc(2 * var(--window-unit));
2337
+ .yNZdnG_name {
2338
+ align-items: center;
2339
+ gap: calc(6 * var(--info-unit));
2340
+ min-width: 0;
2296
2341
  display: flex;
2297
2342
  }
2298
2343
 
2299
- .gVdevq_none {
2300
- padding: calc(6 * var(--window-unit)) calc(8 * var(--window-unit));
2301
- justify-self: stretch;
2344
+ .yNZdnG_icon {
2345
+ height: calc(16 * var(--info-unit));
2346
+ width: calc(16 * var(--info-unit));
2347
+ flex: none;
2302
2348
  }
2303
2349
 
2304
- .gVdevq_none:hover {
2305
- background: var(--esf-bay-row-hover);
2350
+ .yNZdnG_label {
2351
+ text-overflow: ellipsis;
2352
+ white-space: nowrap;
2353
+ overflow: hidden;
2306
2354
  }
2307
2355
 
2308
- .gVdevq_selection {
2309
- color: var(--esf-text-muted);
2310
- align-items: center;
2311
- gap: calc(3 * var(--window-unit));
2356
+ .yNZdnG_slider {
2357
+ --worse: var(--esf-bad);
2358
+ --better: var(--esf-good);
2359
+ --low: var(--worse);
2360
+ --high: var(--better);
2361
+ align-self: center;
2312
2362
  display: flex;
2363
+ position: relative;
2313
2364
  }
2314
2365
 
2315
- .gVdevq_box {
2316
- background: var(--esf-drone-box);
2317
- border: var(--window-unit) solid var(--esf-button-edge);
2318
- color: var(--esf-text);
2319
- cursor: default;
2320
- font-size: calc(10 * var(--window-unit));
2321
- height: calc(13 * var(--window-unit));
2322
- width: calc(13 * var(--window-unit));
2323
- padding: 0;
2324
- line-height: 1;
2366
+ .yNZdnG_slider:not([data-high-is-good]) {
2367
+ --low: var(--better);
2368
+ --high: var(--worse);
2325
2369
  }
2326
2370
 
2327
- .gVdevq_box:first-child {
2328
- margin-left: calc(2 * var(--window-unit));
2371
+ .yNZdnG_slider:after {
2372
+ background: var(--esf-text);
2373
+ content: "";
2374
+ height: calc(14 * var(--info-unit));
2375
+ left: var(--base);
2376
+ pointer-events: none;
2377
+ width: 1px;
2378
+ position: absolute;
2379
+ top: 50%;
2380
+ translate: 0 -50%;
2329
2381
  }
2330
2382
 
2331
- .gVdevq_box[data-state="active"] {
2332
- background: var(--esf-button-active);
2383
+ .yNZdnG_slider > input {
2384
+ appearance: none;
2385
+ background: linear-gradient(90deg,
2386
+ color-mix(in srgb, var(--low) 60%, transparent),
2387
+ var(--esf-resistance-bg) var(--base),
2388
+ color-mix(in srgb, var(--high) 60%, transparent));
2389
+ cursor: pointer;
2390
+ height: calc(4 * var(--info-unit));
2391
+ margin: calc(8 * var(--info-unit)) 0;
2392
+ width: 100%;
2393
+ }
2394
+
2395
+ .yNZdnG_slider > input::-webkit-slider-thumb {
2396
+ appearance: none;
2397
+ background: var(--esf-text);
2398
+ border: 1px solid var(--esf-bg);
2399
+ height: calc(14 * var(--info-unit));
2400
+ width: calc(8 * var(--info-unit));
2333
2401
  }
2334
2402
 
2335
- .gVdevq_box[data-state="open"] {
2336
- background: var(--esf-drone-box-open);
2403
+ .yNZdnG_slider > input::-moz-range-thumb {
2404
+ background: var(--esf-text);
2405
+ border: 1px solid var(--esf-bg);
2406
+ height: calc(14 * var(--info-unit));
2407
+ width: calc(8 * var(--info-unit));
2408
+ border-radius: 0;
2337
2409
  }
2338
2410
 
2339
- .gVdevq_box:enabled:hover {
2340
- border-color: var(--esf-button-active-edge);
2411
+ .yNZdnG_slider > input:focus-visible {
2412
+ outline: 1px solid var(--esf-button-active-edge);
2413
+ outline-offset: calc(4 * var(--info-unit));
2341
2414
  }
2342
2415
 
2343
- .gVdevq_box[data-state="none"] {
2344
- background: var(--esf-drone-box-empty);
2345
- border-color: var(--esf-drone-box-empty);
2416
+ .yNZdnG_value {
2417
+ font-variant-numeric: tabular-nums;
2418
+ text-align: right;
2419
+ white-space: nowrap;
2346
2420
  }
2347
2421
 
2348
- .gVdevq_remove {
2349
- cursor: default;
2350
- opacity: .6;
2351
- background: none;
2352
- border: none;
2353
- padding: 0;
2422
+ .yNZdnG_change {
2423
+ color: var(--esf-text-muted);
2424
+ font-variant-numeric: tabular-nums;
2425
+ text-align: right;
2354
2426
  }
2355
2427
 
2356
- .gVdevq_remove:hover, .gVdevq_remove:focus-visible {
2357
- opacity: 1;
2428
+ .yNZdnG_change[data-change="better"] {
2429
+ color: var(--esf-good);
2358
2430
  }
2359
2431
 
2360
- .gVdevq_remove > img {
2361
- height: calc(16 * var(--window-unit));
2362
- width: calc(16 * var(--window-unit));
2363
- display: block;
2432
+ .yNZdnG_change[data-change="worse"] {
2433
+ color: var(--esf-bad);
2364
2434
  }
2365
2435
 
2366
- .gVdevq_removeAll {
2436
+ .yNZdnG_button {
2367
2437
  background: var(--esf-button);
2368
- border: var(--window-unit) solid var(--esf-button-edge);
2369
- color: inherit;
2370
- cursor: default;
2438
+ border: 1px solid var(--esf-button-edge);
2439
+ color: var(--esf-text);
2440
+ cursor: pointer;
2371
2441
  font: inherit;
2372
- height: calc(31 * var(--window-unit));
2373
- padding: 0 calc(14 * var(--window-unit));
2442
+ padding: calc(4 * var(--info-unit)) calc(12 * var(--info-unit));
2374
2443
  }
2375
2444
 
2376
- .gVdevq_removeAll:hover, .gVdevq_removeAll:focus-visible {
2445
+ .yNZdnG_button:hover:not(:disabled), .yNZdnG_button:focus-visible {
2377
2446
  background: var(--esf-button-active);
2378
2447
  border-color: var(--esf-button-active-edge);
2379
2448
  }
2380
2449
 
2381
- .gVdevq_remove:focus-visible, .gVdevq_removeAll:focus-visible, .gVdevq_box:focus-visible {
2382
- outline: var(--window-unit) solid var(--esf-text);
2383
- }
2384
- .Wlg6ma_tube {
2385
- --tube-unit: calc(1px * var(--esf-scale, 1));
2386
- border-image: var(--tube) 6 fill / calc(6 * var(--tube-unit));
2387
- box-sizing: border-box;
2388
- color: var(--esf-text-muted);
2389
- height: calc(116 * var(--tube-unit));
2390
- user-select: none;
2391
- width: calc(86 * var(--tube-unit));
2392
- position: relative;
2450
+ .yNZdnG_button:disabled {
2451
+ cursor: default;
2452
+ opacity: .5;
2393
2453
  }
2394
2454
 
2395
- .Wlg6ma_tube:not([data-state="unavailable"]):hover:before {
2396
- background: var(--esf-fighter-tube-hover);
2397
- content: "";
2398
- position: absolute;
2399
- inset: 0;
2455
+ .yNZdnG_import {
2456
+ gap: calc(8 * var(--info-unit));
2457
+ flex-direction: column;
2458
+ display: flex;
2400
2459
  }
2401
2460
 
2402
- .Wlg6ma_tube[data-state="unavailable"] {
2403
- opacity: .4;
2461
+ .yNZdnG_panel > .yNZdnG_button, .yNZdnG_import > .yNZdnG_button {
2462
+ align-self: flex-start;
2404
2463
  }
2405
2464
 
2406
- .Wlg6ma_number {
2465
+ .yNZdnG_field {
2466
+ resize: vertical;
2467
+ background: var(--esf-input-bg);
2468
+ border: 1px solid var(--esf-input-border);
2407
2469
  color: var(--esf-text);
2408
- font-size: calc(11 * var(--tube-unit));
2409
- height: calc(14 * var(--tube-unit));
2410
- left: calc(2 * var(--tube-unit));
2411
- top: calc(2 * var(--tube-unit));
2412
- width: calc(14 * var(--tube-unit));
2413
- justify-content: center;
2414
- align-items: center;
2415
- line-height: 1;
2416
- display: flex;
2417
- position: absolute;
2470
+ font: inherit;
2471
+ padding: calc(6 * var(--info-unit)) calc(8 * var(--info-unit));
2418
2472
  }
2419
2473
 
2420
- .Wlg6ma_number:before {
2421
- background: var(--flag) center / 100% 100%;
2422
- content: "";
2423
- opacity: .35;
2424
- position: absolute;
2425
- inset: 0;
2474
+ .yNZdnG_field:focus {
2475
+ border-color: var(--esf-text-muted);
2476
+ outline: none;
2426
2477
  }
2427
2478
 
2428
- .Wlg6ma_empty, .Wlg6ma_squadron {
2429
- height: calc(86 * var(--tube-unit));
2430
- width: calc(86 * var(--tube-unit));
2431
- position: absolute;
2432
- top: 0;
2433
- left: 0;
2479
+ .yNZdnG_error {
2480
+ color: var(--esf-violation-error);
2481
+ margin: 0;
2482
+ }
2483
+ .qMyuGa_bonuses {
2484
+ --unit: var(--tooltip-unit, 1px);
2485
+ color: var(--esf-text-muted);
2486
+ align-items: baseline;
2487
+ column-gap: calc(8 * var(--unit));
2488
+ max-height: min(calc(500 * var(--unit)), 60vh);
2489
+ row-gap: calc(4 * var(--unit));
2490
+ scrollbar-color: var(--esf-border) transparent;
2491
+ scrollbar-width: thin;
2492
+ grid-template-columns: auto 1fr;
2493
+ line-height: 1.3;
2494
+ display: grid;
2495
+ overflow-y: auto;
2434
2496
  }
2435
2497
 
2436
- .Wlg6ma_empty {
2437
- background: var(--texture) center / 100% 100%;
2498
+ .qMyuGa_name {
2499
+ color: var(--esf-text);
2500
+ grid-column: 1 / -1;
2438
2501
  }
2439
2502
 
2440
- .Wlg6ma_squadron {
2441
- background: var(--underlay) center / 100% 100%;
2503
+ .qMyuGa_header {
2504
+ color: var(--esf-bonus-header);
2505
+ margin-top: calc(6 * var(--unit));
2506
+ grid-column: 1 / -1;
2507
+ font-weight: 600;
2442
2508
  }
2443
2509
 
2444
- .Wlg6ma_squadron:after {
2445
- background: var(--overlay) center / 100% 100%;
2446
- content: "";
2447
- position: absolute;
2448
- inset: 0;
2510
+ .qMyuGa_value {
2511
+ color: var(--esf-bonus-value);
2512
+ text-align: right;
2513
+ white-space: nowrap;
2514
+ font-weight: 600;
2449
2515
  }
2450
2516
 
2451
- .Wlg6ma_picture {
2452
- height: calc(54 * var(--tube-unit));
2453
- left: calc(16 * var(--tube-unit));
2454
- top: calc(16 * var(--tube-unit));
2455
- width: calc(54 * var(--tube-unit));
2456
- border-radius: 50%;
2457
- position: absolute;
2458
- overflow: hidden;
2517
+ .qMyuGa_bonuses [data-bold] {
2518
+ color: var(--esf-text);
2519
+ font-weight: 600;
2459
2520
  }
2460
2521
 
2461
- .Wlg6ma_picture > span {
2462
- width: 100%;
2463
- height: 100%;
2464
- display: block;
2522
+ .qMyuGa_bonuses [data-italic] {
2523
+ font-style: italic;
2465
2524
  }
2466
2525
 
2467
- .Wlg6ma_tube[data-preview] .Wlg6ma_picture {
2468
- filter: sepia() hue-rotate(190deg) saturate(200%);
2526
+ .qMyuGa_bonuses [data-underline] {
2527
+ text-decoration: underline;
2528
+ }
2529
+ .gVdevq_panel {
2530
+ background: var(--esf-menu-bg);
2531
+ border: var(--window-unit) solid var(--esf-input-border);
2532
+ box-sizing: border-box;
2533
+ color: var(--esf-text);
2534
+ gap: calc(10 * var(--window-unit));
2535
+ margin: calc(4 * var(--window-unit)) 0;
2536
+ padding: calc(12 * var(--window-unit)) calc(2 * var(--window-unit));
2537
+ position-anchor: var(--bay-anchor);
2538
+ position-area: bottom span-right;
2539
+ position-try-fallbacks: flip-block;
2540
+ width: calc(370 * var(--window-unit));
2541
+ justify-items: center;
2542
+ inset: auto;
2469
2543
  }
2470
2544
 
2471
- .Wlg6ma_ring {
2472
- fill: none;
2473
- stroke: var(--esf-fighter-empty);
2474
- stroke-width: 4.5px;
2475
- position: absolute;
2476
- inset: 0;
2545
+ .gVdevq_panel:popover-open {
2546
+ display: grid;
2477
2547
  }
2478
2548
 
2479
- .Wlg6ma_ring > [data-lit] {
2480
- stroke: var(--esf-fighter-full);
2549
+ .gVdevq_panel[data-empty] {
2550
+ padding: calc(17 * var(--window-unit)) calc(20 * var(--window-unit));
2551
+ width: auto;
2481
2552
  }
2482
2553
 
2483
- .Wlg6ma_role {
2484
- bottom: calc(18 * var(--tube-unit));
2485
- z-index: 1;
2486
- position: absolute;
2487
- left: 50%;
2488
- translate: -50%;
2554
+ .gVdevq_list {
2555
+ column-gap: calc(8 * var(--window-unit));
2556
+ grid-template-columns: minmax(calc(62 * var(--window-unit)), max-content) auto 1fr auto;
2557
+ max-height: calc(8 * 32 * var(--window-unit));
2558
+ width: 100%;
2559
+ margin: 0;
2560
+ padding: 0;
2561
+ list-style: none;
2562
+ display: grid;
2563
+ overflow-y: auto;
2489
2564
  }
2490
2565
 
2491
- .Wlg6ma_role > img {
2492
- height: calc(16 * var(--tube-unit));
2493
- width: calc(16 * var(--tube-unit));
2494
- display: block;
2566
+ .gVdevq_row {
2567
+ grid-column: 1 / -1;
2568
+ grid-template-columns: subgrid;
2569
+ height: calc(32 * var(--window-unit));
2570
+ padding: 0 calc(8 * var(--window-unit));
2571
+ align-items: center;
2572
+ display: grid;
2495
2573
  }
2496
2574
 
2497
- .Wlg6ma_label {
2498
- text-align: center;
2499
- left: 0;
2500
- right: 0;
2501
- top: calc(79 * var(--tube-unit));
2502
- position: absolute;
2575
+ .gVdevq_row:hover {
2576
+ background: var(--esf-bay-row-hover);
2503
2577
  }
2504
2578
 
2505
- .Wlg6ma_resize {
2506
- gap: calc(8 * var(--tube-unit));
2507
- left: 0;
2508
- right: 0;
2509
- top: calc(96 * var(--tube-unit));
2510
- justify-content: center;
2511
- display: flex;
2512
- position: absolute;
2579
+ .gVdevq_quantity {
2580
+ border: var(--window-unit) solid transparent;
2581
+ align-items: center;
2582
+ column-gap: calc(8 * var(--window-unit));
2583
+ padding: calc(5 * var(--window-unit)) calc(6 * var(--window-unit));
2584
+ grid-template-columns: auto auto;
2585
+ justify-self: end;
2586
+ justify-items: center;
2587
+ display: grid;
2513
2588
  }
2514
2589
 
2515
- .Wlg6ma_resize > button, .Wlg6ma_remove {
2516
- color: var(--esf-text);
2517
- cursor: default;
2590
+ .gVdevq_count {
2591
+ appearance: textfield;
2592
+ color: inherit;
2518
2593
  font: inherit;
2519
- opacity: .8;
2594
+ font-variant-numeric: tabular-nums;
2595
+ text-align: right;
2520
2596
  background: none;
2521
2597
  border: none;
2522
2598
  padding: 0;
2523
- line-height: 1;
2524
2599
  }
2525
2600
 
2526
- .Wlg6ma_resize > button {
2527
- font-size: calc(15 * var(--tube-unit));
2528
- width: calc(12 * var(--tube-unit));
2529
- font-weight: 600;
2601
+ .gVdevq_count::-webkit-inner-spin-button {
2602
+ appearance: none;
2530
2603
  }
2531
2604
 
2532
- .Wlg6ma_resize > button:disabled {
2533
- opacity: .3;
2605
+ .gVdevq_count:focus {
2606
+ outline: none;
2534
2607
  }
2535
2608
 
2536
- .Wlg6ma_remove {
2537
- right: calc(4 * var(--tube-unit));
2538
- top: calc(3 * var(--tube-unit));
2539
- position: absolute;
2609
+ .gVdevq_times, .gVdevq_steps {
2610
+ grid-area: 1 / 2;
2540
2611
  }
2541
2612
 
2542
- .Wlg6ma_remove > img {
2543
- height: calc(14 * var(--tube-unit));
2544
- width: calc(14 * var(--tube-unit));
2545
- display: block;
2613
+ .gVdevq_steps {
2614
+ visibility: hidden;
2546
2615
  }
2547
2616
 
2548
- .Wlg6ma_resize > button:enabled:hover, .Wlg6ma_remove:hover {
2549
- opacity: 1;
2617
+ .gVdevq_steps > button {
2618
+ cursor: default;
2619
+ opacity: .6;
2620
+ background: none;
2621
+ border: none;
2622
+ padding: 0;
2623
+ display: block;
2550
2624
  }
2551
2625
 
2552
- .Wlg6ma_resize > button:focus-visible, .Wlg6ma_remove:focus-visible {
2626
+ .gVdevq_steps > button:hover {
2553
2627
  opacity: 1;
2554
- outline: var(--tube-unit) solid var(--esf-text);
2555
- }
2556
- .L9t91q_window {
2557
- --window-unit: calc(1px * var(--esf-scale, 1));
2558
- --browser-width: 0px;
2559
- --statistics-width: 0px;
2560
- color: var(--esf-text);
2561
- font-family: var(--esf-font);
2562
- font-size: calc(var(--esf-font-size) * var(--esf-scale, 1));
2563
- height: calc(694 * var(--window-unit));
2564
- user-select: none;
2565
- width: calc(708 * var(--window-unit) + var(--browser-width) + var(--statistics-width));
2566
- transition: width .2s;
2567
- position: relative;
2568
- }
2569
-
2570
- .L9t91q_window[data-browser] {
2571
- --browser-width: calc(400 * var(--window-unit));
2572
- }
2573
-
2574
- .L9t91q_window[data-statistics] {
2575
- --statistics-width: calc(272 * var(--window-unit));
2576
- }
2577
-
2578
- .L9t91q_frame {
2579
- inset: calc(29 * var(--window-unit)) auto 0 var(--browser-width);
2580
- width: calc(700 * var(--window-unit));
2581
- transition: left .2s;
2582
- position: absolute;
2583
2628
  }
2584
2629
 
2585
- .L9t91q_icon > img, .L9t91q_tool > img, .L9t91q_bay > img {
2630
+ .gVdevq_steps img {
2631
+ height: calc(8 * var(--window-unit));
2632
+ width: calc(8 * var(--window-unit));
2586
2633
  display: block;
2587
2634
  }
2588
2635
 
2589
- .L9t91q_wheel {
2590
- --esf-wheel-size: calc(572 * var(--window-unit));
2591
- left: calc(68 * var(--window-unit));
2592
- position: absolute;
2593
- top: 0;
2636
+ .gVdevq_quantity:hover, .gVdevq_quantity:focus-within {
2637
+ border-color: var(--esf-spinner-edge);
2594
2638
  }
2595
2639
 
2596
- .L9t91q_placeholder {
2597
- color: var(--esf-text-muted);
2598
- justify-content: center;
2599
- align-items: center;
2600
- display: flex;
2601
- position: absolute;
2602
- inset: 0;
2640
+ .gVdevq_quantity:hover .gVdevq_times, .gVdevq_quantity:focus-within .gVdevq_times {
2641
+ visibility: hidden;
2603
2642
  }
2604
2643
 
2605
- .L9t91q_placeholder > p {
2606
- text-align: center;
2607
- white-space: pre-line;
2608
- margin: 0;
2644
+ .gVdevq_quantity:hover .gVdevq_steps, .gVdevq_quantity:focus-within .gVdevq_steps {
2645
+ visibility: visible;
2609
2646
  }
2610
2647
 
2611
- .L9t91q_name, .L9t91q_violations, .L9t91q_tools, .L9t91q_panels, .L9t91q_bays, .L9t91q_history, .L9t91q_services, .L9t91q_resources {
2612
- position: absolute;
2648
+ .gVdevq_quantity:focus-within {
2649
+ background: var(--esf-spinner-focus);
2650
+ border-color: var(--esf-spinner-focus-edge);
2613
2651
  }
2614
2652
 
2615
- .L9t91q_name {
2616
- align-items: center;
2617
- gap: calc(2 * var(--window-unit));
2618
- left: calc(20 * var(--window-unit));
2619
- max-width: calc(150 * var(--window-unit));
2620
- top: calc(40 * var(--window-unit));
2621
- white-space: nowrap;
2622
- display: flex;
2653
+ .gVdevq_icon {
2654
+ height: calc(24 * var(--window-unit));
2655
+ width: calc(24 * var(--window-unit));
2623
2656
  }
2624
2657
 
2625
- .L9t91q_fitName {
2626
- color: inherit;
2627
- cursor: text;
2628
- font: inherit;
2629
- text-overflow: ellipsis;
2630
- background: none;
2631
- border: none;
2632
- padding: 0;
2633
- overflow: hidden;
2658
+ .gVdevq_icon > span {
2659
+ width: 100%;
2660
+ height: 100%;
2661
+ display: block;
2634
2662
  }
2635
2663
 
2636
- .L9t91q_fitNameInput {
2637
- background: var(--esf-input-bg);
2638
- border: var(--window-unit) solid var(--esf-input-border);
2639
- color: var(--esf-text);
2640
- font: inherit;
2664
+ .gVdevq_middle {
2665
+ gap: calc(6 * var(--window-unit));
2641
2666
  min-width: 0;
2642
- padding: 0 calc(2 * var(--window-unit));
2643
- }
2644
-
2645
- .L9t91q_icon {
2646
- cursor: default;
2647
- background: none;
2648
- border: none;
2649
- padding: 0;
2650
- }
2651
-
2652
- .L9t91q_icon > img {
2653
- height: calc(16 * var(--window-unit));
2654
- width: calc(16 * var(--window-unit));
2655
- }
2656
-
2657
- .L9t91q_icon > img[data-icon="link"] {
2658
- height: calc(12 * var(--window-unit));
2659
- margin: 0 calc(2 * var(--window-unit));
2660
- opacity: .6;
2661
- width: calc(12 * var(--window-unit));
2667
+ display: grid;
2662
2668
  }
2663
2669
 
2664
- .L9t91q_icon:focus-visible, .L9t91q_tool:focus-visible {
2665
- outline: var(--window-unit) solid var(--esf-text);
2670
+ .gVdevq_name {
2671
+ text-align: center;
2672
+ text-overflow: ellipsis;
2673
+ white-space: nowrap;
2674
+ overflow: hidden;
2666
2675
  }
2667
2676
 
2668
- .L9t91q_violations {
2669
- gap: calc(14 * var(--window-unit));
2670
- left: calc(20 * var(--window-unit));
2671
- top: calc(62 * var(--window-unit));
2672
- display: flex;
2677
+ .gVdevq_name[data-mutated] {
2678
+ color: var(--esf-mutated);
2673
2679
  }
2674
2680
 
2675
- .L9t91q_violation {
2676
- height: calc(28 * var(--window-unit));
2677
- width: calc(28 * var(--window-unit));
2678
- position: relative;
2681
+ .gVdevq_activeDrones {
2682
+ padding-left: calc(8 * var(--window-unit));
2683
+ justify-self: start;
2684
+ font-weight: 600;
2679
2685
  }
2680
2686
 
2681
- .L9t91q_violation, .L9t91q_alert {
2682
- --colour: var(--esf-violation-notice);
2687
+ .gVdevq_panel[data-drones] .gVdevq_list {
2688
+ grid-template-columns: minmax(calc(52 * var(--window-unit)), max-content) auto 1fr auto;
2689
+ max-height: calc(5 * 64 * var(--window-unit));
2683
2690
  }
2684
2691
 
2685
- .L9t91q_violation:before {
2686
- background: var(--colour);
2687
- content: "";
2688
- mask: var(--texture) center / 100% 100%;
2689
- position: absolute;
2690
- inset: 0;
2692
+ .gVdevq_panel[data-drones] .gVdevq_row {
2693
+ height: calc(64 * var(--window-unit));
2691
2694
  }
2692
2695
 
2693
- .L9t91q_violation[data-kind="error"], .L9t91q_alert[data-kind="error"] {
2694
- --colour: var(--esf-violation-error);
2696
+ .gVdevq_panel[data-drones] .gVdevq_icon {
2697
+ height: calc(60 * var(--window-unit));
2698
+ width: calc(60 * var(--window-unit));
2695
2699
  }
2696
2700
 
2697
- .L9t91q_violation[data-kind="skill"], .L9t91q_alert[data-kind="skill"] {
2698
- --colour: var(--esf-violation-skill);
2701
+ .gVdevq_panel[data-drones] .gVdevq_name {
2702
+ text-align: left;
2699
2703
  }
2700
2704
 
2701
- .L9t91q_alert {
2702
- display: contents;
2705
+ .gVdevq_panel[data-fighters] {
2706
+ padding: calc(12 * var(--window-unit));
2707
+ width: auto;
2703
2708
  }
2704
2709
 
2705
- .L9t91q_alertTitle {
2706
- color: var(--colour);
2707
- text-transform: uppercase;
2710
+ .gVdevq_panel[data-fighters] .gVdevq_list {
2711
+ width: calc(5 * 88 * var(--window-unit) - 2 * var(--window-unit));
2708
2712
  }
2709
2713
 
2710
- .L9t91q_alertLine {
2711
- align-items: center;
2712
- gap: calc(8 * var(--window-unit));
2714
+ .gVdevq_kinds {
2715
+ gap: calc(22 * var(--window-unit));
2716
+ min-height: calc(16 * var(--window-unit));
2717
+ padding-left: calc(4 * var(--window-unit));
2718
+ justify-self: start;
2713
2719
  display: flex;
2714
2720
  }
2715
2721
 
2716
- .L9t91q_alertLine:before {
2717
- background: var(--colour);
2718
- content: "";
2719
- height: 1.4em;
2720
- mask: var(--texture) center / 100% 100%;
2721
- flex: none;
2722
- width: 1.4em;
2723
- }
2724
-
2725
- .L9t91q_count {
2726
- left: calc(100% - 2 * var(--window-unit));
2727
- top: calc(-2 * var(--window-unit));
2728
- font-size: .85em;
2729
- line-height: 1;
2730
- position: absolute;
2722
+ .gVdevq_kind {
2723
+ align-items: baseline;
2724
+ gap: calc(2 * var(--window-unit));
2725
+ display: flex;
2731
2726
  }
2732
2727
 
2733
- .L9t91q_tools {
2734
- left: calc(16 * var(--window-unit));
2735
- top: calc(125 * var(--window-unit));
2728
+ .gVdevq_kind > img {
2729
+ height: calc(16 * var(--window-unit));
2730
+ translate: 0 calc(8 * var(--window-unit) - .5cap);
2731
+ width: calc(16 * var(--window-unit));
2736
2732
  }
2737
2733
 
2738
- .L9t91q_panels {
2739
- right: calc(11 * var(--window-unit));
2740
- top: calc(167 * var(--window-unit));
2734
+ .gVdevq_tubes {
2735
+ gap: calc(2 * var(--window-unit));
2736
+ display: flex;
2741
2737
  }
2742
2738
 
2743
- .L9t91q_tool {
2744
- background: var(--esf-button);
2745
- border-radius: 0 calc(5 * var(--window-unit)) calc(5 * var(--window-unit)) 0;
2746
- box-shadow: inset calc(-1 * var(--window-unit)) 0 var(--esf-button-edge);
2747
- cursor: default;
2748
- height: calc(39 * var(--window-unit));
2749
- width: calc(45 * var(--window-unit));
2750
- border: none;
2751
- justify-content: center;
2739
+ .gVdevq_none {
2740
+ padding: calc(6 * var(--window-unit)) calc(8 * var(--window-unit));
2741
+ justify-self: stretch;
2742
+ }
2743
+
2744
+ .gVdevq_none:hover {
2745
+ background: var(--esf-bay-row-hover);
2746
+ }
2747
+
2748
+ .gVdevq_selection {
2749
+ color: var(--esf-text-muted);
2752
2750
  align-items: center;
2753
- padding: 0;
2751
+ gap: calc(3 * var(--window-unit));
2754
2752
  display: flex;
2755
2753
  }
2756
2754
 
2757
- .L9t91q_panels .L9t91q_tool {
2758
- border-radius: calc(5 * var(--window-unit)) 0 0 calc(5 * var(--window-unit));
2759
- box-shadow: inset var(--window-unit) 0 var(--esf-button-edge);
2760
- width: calc(42 * var(--window-unit));
2755
+ .gVdevq_box {
2756
+ background: var(--esf-drone-box);
2757
+ border: var(--window-unit) solid var(--esf-button-edge);
2758
+ color: var(--esf-text);
2759
+ cursor: default;
2760
+ font-size: calc(10 * var(--window-unit));
2761
+ height: calc(13 * var(--window-unit));
2762
+ width: calc(13 * var(--window-unit));
2763
+ padding: 0;
2764
+ line-height: 1;
2761
2765
  }
2762
2766
 
2763
- .L9t91q_tools .L9t91q_tool[aria-expanded="true"] {
2764
- background: var(--esf-button-active);
2765
- box-shadow: inset calc(-1 * var(--window-unit)) 0 var(--esf-button-active-edge);
2767
+ .gVdevq_box:first-child {
2768
+ margin-left: calc(2 * var(--window-unit));
2766
2769
  }
2767
2770
 
2768
- .L9t91q_panels .L9t91q_tool[aria-expanded="true"] {
2771
+ .gVdevq_box[data-state="active"] {
2769
2772
  background: var(--esf-button-active);
2770
- box-shadow: inset var(--window-unit) 0 var(--esf-button-active-edge);
2771
2773
  }
2772
2774
 
2773
- .L9t91q_tools .L9t91q_tool > img {
2774
- height: calc(40 * var(--window-unit));
2775
- width: calc(40 * var(--window-unit));
2775
+ .gVdevq_box[data-state="open"] {
2776
+ background: var(--esf-drone-box-open);
2776
2777
  }
2777
2778
 
2778
- .L9t91q_panels .L9t91q_tool > img {
2779
- height: calc(20 * var(--window-unit));
2780
- width: calc(20 * var(--window-unit));
2779
+ .gVdevq_box:enabled:hover {
2780
+ border-color: var(--esf-button-active-edge);
2781
2781
  }
2782
2782
 
2783
- .L9t91q_bays {
2784
- gap: calc(4 * var(--window-unit));
2785
- bottom: calc(17 * var(--window-unit));
2786
- left: calc(19 * var(--window-unit));
2787
- display: grid;
2783
+ .gVdevq_box[data-state="none"] {
2784
+ background: var(--esf-drone-box-empty);
2785
+ border-color: var(--esf-drone-box-empty);
2788
2786
  }
2789
2787
 
2790
- .L9t91q_bay {
2791
- color: inherit;
2792
- align-items: center;
2793
- column-gap: calc(5 * var(--window-unit));
2788
+ .gVdevq_remove {
2794
2789
  cursor: default;
2795
- font: inherit;
2796
- line-height: calc(13 * var(--window-unit));
2790
+ opacity: .6;
2797
2791
  background: none;
2798
2792
  border: none;
2799
- grid-template-columns: repeat(4, auto);
2800
- justify-content: start;
2801
2793
  padding: 0;
2802
- display: grid;
2803
2794
  }
2804
2795
 
2805
- .L9t91q_bayAnchor {
2806
- anchor-name: var(--bay-anchor);
2796
+ .gVdevq_remove:hover, .gVdevq_remove:focus-visible {
2797
+ opacity: 1;
2807
2798
  }
2808
2799
 
2809
- .L9t91q_bay > * {
2810
- pointer-events: none;
2800
+ .gVdevq_remove > img {
2801
+ height: calc(16 * var(--window-unit));
2802
+ width: calc(16 * var(--window-unit));
2803
+ display: block;
2811
2804
  }
2812
2805
 
2813
- .L9t91q_bay:focus-visible {
2806
+ .gVdevq_removeAll {
2807
+ background: var(--esf-button);
2808
+ border: var(--window-unit) solid var(--esf-button-edge);
2809
+ color: inherit;
2810
+ cursor: default;
2811
+ font: inherit;
2812
+ height: calc(31 * var(--window-unit));
2813
+ padding: 0 calc(14 * var(--window-unit));
2814
+ }
2815
+
2816
+ .gVdevq_removeAll:hover, .gVdevq_removeAll:focus-visible {
2817
+ background: var(--esf-button-active);
2818
+ border-color: var(--esf-button-active-edge);
2819
+ }
2820
+
2821
+ .gVdevq_remove:focus-visible, .gVdevq_removeAll:focus-visible, .gVdevq_box:focus-visible {
2814
2822
  outline: var(--window-unit) solid var(--esf-text);
2815
2823
  }
2824
+ .Wlg6ma_tube {
2825
+ --tube-unit: calc(1px * var(--esf-scale, 1));
2826
+ border-image: var(--tube) 6 fill / calc(6 * var(--tube-unit));
2827
+ box-sizing: border-box;
2828
+ color: var(--esf-text-muted);
2829
+ height: calc(116 * var(--tube-unit));
2830
+ user-select: none;
2831
+ width: calc(86 * var(--tube-unit));
2832
+ position: relative;
2833
+ }
2816
2834
 
2817
- .L9t91q_bay > img {
2818
- height: calc(32 * var(--window-unit));
2819
- width: calc(32 * var(--window-unit));
2820
- grid-area: 1 / 1 / 3;
2835
+ .Wlg6ma_tube:not([data-state="unavailable"]):hover:before {
2836
+ background: var(--esf-fighter-tube-hover);
2837
+ content: "";
2838
+ position: absolute;
2839
+ inset: 0;
2821
2840
  }
2822
2841
 
2823
- .L9t91q_used, .L9t91q_total {
2824
- grid-column: 3;
2825
- justify-self: end;
2842
+ .Wlg6ma_tube[data-state="unavailable"] {
2843
+ opacity: .4;
2826
2844
  }
2827
2845
 
2828
- .L9t91q_used {
2829
- grid-row: 1;
2846
+ .Wlg6ma_number {
2847
+ color: var(--esf-text);
2848
+ font-size: calc(11 * var(--tube-unit));
2849
+ height: calc(14 * var(--tube-unit));
2850
+ left: calc(2 * var(--tube-unit));
2851
+ top: calc(2 * var(--tube-unit));
2852
+ width: calc(14 * var(--tube-unit));
2853
+ justify-content: center;
2854
+ align-items: center;
2855
+ line-height: 1;
2856
+ display: flex;
2857
+ position: absolute;
2830
2858
  }
2831
2859
 
2832
- .L9t91q_slash, .L9t91q_total, .L9t91q_unit {
2833
- grid-row: 2;
2860
+ .Wlg6ma_number:before {
2861
+ background: var(--flag) center / 100% 100%;
2862
+ content: "";
2863
+ opacity: .35;
2864
+ position: absolute;
2865
+ inset: 0;
2834
2866
  }
2835
2867
 
2836
- .L9t91q_slash {
2837
- grid-column: 2;
2868
+ .Wlg6ma_empty, .Wlg6ma_squadron {
2869
+ height: calc(86 * var(--tube-unit));
2870
+ width: calc(86 * var(--tube-unit));
2871
+ position: absolute;
2872
+ top: 0;
2873
+ left: 0;
2838
2874
  }
2839
2875
 
2840
- .L9t91q_history {
2841
- bottom: calc(17 * var(--window-unit));
2842
- left: calc(199 * var(--window-unit));
2876
+ .Wlg6ma_empty {
2877
+ background: var(--texture) center / 100% 100%;
2843
2878
  }
2844
2879
 
2845
- .L9t91q_services {
2846
- gap: calc(4 * var(--window-unit));
2847
- bottom: calc(38 * var(--window-unit));
2848
- left: calc(164 * var(--window-unit));
2849
- display: flex;
2880
+ .Wlg6ma_squadron {
2881
+ background: var(--underlay) center / 100% 100%;
2850
2882
  }
2851
2883
 
2852
- .L9t91q_resources {
2853
- gap: calc(10 * var(--window-unit));
2854
- line-height: calc(16 * var(--window-unit));
2855
- right: calc(13 * var(--window-unit));
2856
- bottom: calc(17 * var(--window-unit));
2857
- text-align: right;
2858
- display: grid;
2884
+ .Wlg6ma_squadron:after {
2885
+ background: var(--overlay) center / 100% 100%;
2886
+ content: "";
2887
+ position: absolute;
2888
+ inset: 0;
2859
2889
  }
2860
2890
 
2861
- .L9t91q_resource {
2862
- gap: calc(2 * var(--window-unit));
2863
- display: grid;
2891
+ .Wlg6ma_picture {
2892
+ height: calc(54 * var(--tube-unit));
2893
+ left: calc(16 * var(--tube-unit));
2894
+ top: calc(16 * var(--tube-unit));
2895
+ width: calc(54 * var(--tube-unit));
2896
+ border-radius: 50%;
2897
+ position: absolute;
2898
+ overflow: hidden;
2864
2899
  }
2865
2900
 
2866
- .L9t91q_title {
2867
- font-weight: 600;
2901
+ .Wlg6ma_picture > span {
2902
+ width: 100%;
2903
+ height: 100%;
2904
+ display: block;
2868
2905
  }
2869
2906
 
2870
- .L9t91q_resource[data-change="better"] .L9t91q_free {
2871
- color: var(--esf-good);
2907
+ .Wlg6ma_tube[data-preview] .Wlg6ma_picture {
2908
+ filter: sepia() hue-rotate(190deg) saturate(200%);
2872
2909
  }
2873
2910
 
2874
- .L9t91q_resource[data-change="worse"] .L9t91q_free {
2875
- color: var(--esf-bad);
2911
+ .Wlg6ma_ring {
2912
+ fill: none;
2913
+ stroke: var(--esf-fighter-empty);
2914
+ stroke-width: 4.5px;
2915
+ position: absolute;
2916
+ inset: 0;
2876
2917
  }
2877
2918
 
2878
- .L9t91q_bay[data-over], .L9t91q_resource[data-over] > :last-child, .L9t91q_resource[data-over] .L9t91q_free {
2879
- color: var(--esf-violation-error);
2919
+ .Wlg6ma_ring > [data-lit] {
2920
+ stroke: var(--esf-fighter-full);
2880
2921
  }
2881
2922
 
2882
- .L9t91q_browser, .L9t91q_statistics {
2883
- bottom: calc(16 * var(--window-unit));
2884
- top: calc(64 * var(--window-unit));
2923
+ .Wlg6ma_role {
2924
+ bottom: calc(18 * var(--tube-unit));
2925
+ z-index: 1;
2885
2926
  position: absolute;
2886
- overflow: hidden;
2927
+ left: 50%;
2928
+ translate: -50%;
2887
2929
  }
2888
2930
 
2889
- .L9t91q_browser {
2890
- left: calc(15 * var(--window-unit));
2891
- width: calc(393 * var(--window-unit));
2931
+ .Wlg6ma_role > img {
2932
+ height: calc(16 * var(--tube-unit));
2933
+ width: calc(16 * var(--tube-unit));
2934
+ display: block;
2892
2935
  }
2893
2936
 
2894
- .L9t91q_statistics {
2895
- left: calc(700 * var(--window-unit) + var(--browser-width));
2896
- transition: left .2s;
2937
+ .Wlg6ma_label {
2938
+ text-align: center;
2939
+ left: 0;
2897
2940
  right: 0;
2941
+ top: calc(79 * var(--tube-unit));
2942
+ position: absolute;
2898
2943
  }
2899
2944
 
2900
- .L9t91q_statistics > .L9t91q_slide {
2901
- width: calc(280 * var(--window-unit));
2945
+ .Wlg6ma_resize {
2946
+ gap: calc(8 * var(--tube-unit));
2947
+ left: 0;
2948
+ right: 0;
2949
+ top: calc(96 * var(--tube-unit));
2950
+ justify-content: center;
2951
+ display: flex;
2952
+ position: absolute;
2902
2953
  }
2903
2954
 
2904
- .L9t91q_slide {
2905
- visibility: hidden;
2906
- height: 100%;
2907
- transition: transform .2s, visibility .2s;
2955
+ .Wlg6ma_resize > button, .Wlg6ma_remove {
2956
+ color: var(--esf-text);
2957
+ cursor: default;
2958
+ font: inherit;
2959
+ opacity: .8;
2960
+ background: none;
2961
+ border: none;
2962
+ padding: 0;
2963
+ line-height: 1;
2964
+ }
2965
+
2966
+ .Wlg6ma_resize > button {
2967
+ font-size: calc(15 * var(--tube-unit));
2968
+ width: calc(12 * var(--tube-unit));
2969
+ font-weight: 600;
2970
+ }
2971
+
2972
+ .Wlg6ma_resize > button:disabled {
2973
+ opacity: .3;
2908
2974
  }
2909
2975
 
2910
- .L9t91q_browser > .L9t91q_slide, .L9t91q_statistics > .L9t91q_slide {
2911
- transform: translateX(-100%);
2976
+ .Wlg6ma_remove {
2977
+ right: calc(4 * var(--tube-unit));
2978
+ top: calc(3 * var(--tube-unit));
2979
+ position: absolute;
2912
2980
  }
2913
2981
 
2914
- .L9t91q_window[data-browser] > .L9t91q_browser > .L9t91q_slide, .L9t91q_window[data-statistics] > .L9t91q_statistics > .L9t91q_slide {
2915
- visibility: visible;
2916
- transform: none;
2982
+ .Wlg6ma_remove > img {
2983
+ height: calc(14 * var(--tube-unit));
2984
+ width: calc(14 * var(--tube-unit));
2985
+ display: block;
2917
2986
  }
2918
2987
 
2919
- @media (prefers-reduced-motion: reduce) {
2920
- .L9t91q_window, .L9t91q_frame, .L9t91q_statistics, .L9t91q_slide {
2921
- transition: none;
2922
- }
2988
+ .Wlg6ma_resize > button:enabled:hover, .Wlg6ma_remove:hover {
2989
+ opacity: 1;
2923
2990
  }
2924
- .xFSZwa_browser {
2925
- --browser-unit: calc(1px * var(--esf-scale, 1));
2991
+
2992
+ .Wlg6ma_resize > button:focus-visible, .Wlg6ma_remove:focus-visible {
2993
+ opacity: 1;
2994
+ outline: var(--tube-unit) solid var(--esf-text);
2995
+ }
2996
+ .L9t91q_window {
2997
+ --window-unit: calc(1px * var(--esf-scale, 1));
2998
+ --browser-width: 0px;
2999
+ --statistics-width: 0px;
2926
3000
  color: var(--esf-text);
2927
3001
  font-family: var(--esf-font);
2928
3002
  font-size: calc(var(--esf-font-size) * var(--esf-scale, 1));
3003
+ height: calc(694 * var(--window-unit));
2929
3004
  user-select: none;
2930
- height: 100%;
2931
- width: calc(393 * var(--browser-unit));
2932
- flex-direction: column;
2933
- display: flex;
3005
+ width: calc(708 * var(--window-unit) + var(--browser-width) + var(--statistics-width));
3006
+ transition: width .2s;
3007
+ position: relative;
2934
3008
  }
2935
3009
 
2936
- .xFSZwa_tabs {
2937
- --corner: calc(6 * var(--browser-unit));
2938
- clip-path: polygon(0 0,
2939
- 100% 0,
2940
- 100% calc(100% - var(--corner)),
2941
- calc(100% - var(--corner)) 100%,
2942
- var(--corner) 100%,
2943
- 0 calc(100% - var(--corner)));
2944
- gap: calc(4 * var(--browser-unit));
2945
- display: flex;
3010
+ .L9t91q_window[data-browser] {
3011
+ --browser-width: calc(400 * var(--window-unit));
2946
3012
  }
2947
3013
 
2948
- .xFSZwa_tab {
2949
- background: var(--esf-tab);
2950
- color: inherit;
2951
- cursor: default;
2952
- font: inherit;
2953
- height: calc(24 * var(--browser-unit));
2954
- border: none;
2955
- flex: 1;
2956
- padding: 0;
3014
+ .L9t91q_window[data-statistics] {
3015
+ --statistics-width: calc(272 * var(--window-unit));
2957
3016
  }
2958
3017
 
2959
- .xFSZwa_tab[aria-selected="true"] {
2960
- background: var(--esf-tab-active);
3018
+ .L9t91q_frame {
3019
+ inset: calc(29 * var(--window-unit)) auto 0 var(--browser-width);
3020
+ width: calc(700 * var(--window-unit));
3021
+ transition: left .2s;
3022
+ position: absolute;
2961
3023
  }
2962
3024
 
2963
- .xFSZwa_tab:focus-visible, .xFSZwa_collapse:focus-visible {
2964
- outline: var(--browser-unit) solid var(--esf-text);
3025
+ .L9t91q_icon > img, .L9t91q_tool > img, .L9t91q_bay > img {
3026
+ display: block;
2965
3027
  }
2966
3028
 
2967
- .xFSZwa_tab:focus-visible {
2968
- outline-offset: calc(-1 * var(--browser-unit));
3029
+ .L9t91q_wheel {
3030
+ --esf-wheel-size: calc(572 * var(--window-unit));
3031
+ left: calc(68 * var(--window-unit));
3032
+ position: absolute;
3033
+ top: 0;
2969
3034
  }
2970
3035
 
2971
- .xFSZwa_panel {
2972
- flex-direction: column;
2973
- flex: 1;
2974
- min-height: 0;
3036
+ .L9t91q_placeholder {
3037
+ color: var(--esf-text-muted);
3038
+ justify-content: center;
3039
+ align-items: center;
2975
3040
  display: flex;
3041
+ position: absolute;
3042
+ inset: 0;
2976
3043
  }
2977
3044
 
2978
- .xFSZwa_panel[hidden] {
2979
- display: none;
3045
+ .L9t91q_placeholder > p {
3046
+ text-align: center;
3047
+ white-space: pre-line;
3048
+ margin: 0;
2980
3049
  }
2981
3050
 
2982
- .xFSZwa_search {
2983
- height: calc(32 * var(--browser-unit));
2984
- margin-top: calc(8 * var(--browser-unit));
3051
+ .L9t91q_name, .L9t91q_violations, .L9t91q_tools, .L9t91q_panels, .L9t91q_bays, .L9t91q_history, .L9t91q_services, .L9t91q_resources {
3052
+ position: absolute;
3053
+ }
3054
+
3055
+ .L9t91q_name {
2985
3056
  align-items: center;
3057
+ gap: calc(2 * var(--window-unit));
3058
+ left: calc(20 * var(--window-unit));
3059
+ max-width: calc(150 * var(--window-unit));
3060
+ top: calc(40 * var(--window-unit));
3061
+ white-space: nowrap;
2986
3062
  display: flex;
2987
3063
  }
2988
3064
 
2989
- .xFSZwa_collapse {
2990
- cursor: pointer;
2991
- opacity: .6;
2992
- width: calc(28 * var(--browser-unit));
3065
+ .L9t91q_fitName {
3066
+ color: inherit;
3067
+ cursor: text;
3068
+ font: inherit;
3069
+ text-overflow: ellipsis;
2993
3070
  background: none;
2994
3071
  border: none;
2995
- justify-content: center;
2996
3072
  padding: 0;
2997
- display: flex;
2998
- }
2999
-
3000
- .xFSZwa_collapse:hover, .xFSZwa_collapse:focus-visible {
3001
- opacity: 1;
3002
- }
3003
-
3004
- .xFSZwa_collapse > img {
3005
- height: calc(14 * var(--browser-unit));
3006
- width: calc(14 * var(--browser-unit));
3007
- }
3008
-
3009
- .xFSZwa_field > img {
3010
- height: calc(16 * var(--browser-unit));
3011
- opacity: .5;
3012
- width: calc(16 * var(--browser-unit));
3073
+ overflow: hidden;
3013
3074
  }
3014
3075
 
3015
- .xFSZwa_field {
3076
+ .L9t91q_fitNameInput {
3016
3077
  background: var(--esf-input-bg);
3017
- border: var(--browser-unit) solid var(--esf-input-border);
3018
- align-self: stretch;
3019
- align-items: center;
3020
- gap: calc(5 * var(--browser-unit));
3021
- padding-left: calc(12 * var(--browser-unit));
3022
- flex: 1;
3023
- display: flex;
3078
+ border: var(--window-unit) solid var(--esf-input-border);
3079
+ color: var(--esf-text);
3080
+ font: inherit;
3081
+ min-width: 0;
3082
+ padding: 0 calc(2 * var(--window-unit));
3024
3083
  }
3025
3084
 
3026
- .xFSZwa_field > input {
3027
- color: inherit;
3028
- font: inherit;
3085
+ .L9t91q_icon {
3086
+ cursor: default;
3029
3087
  background: none;
3030
3088
  border: none;
3031
- outline: none;
3032
- flex: 1;
3033
- min-width: 0;
3034
3089
  padding: 0;
3035
3090
  }
3036
3091
 
3037
- .xFSZwa_field > input::placeholder {
3038
- color: var(--esf-text-muted);
3092
+ .L9t91q_icon > img {
3093
+ height: calc(16 * var(--window-unit));
3094
+ width: calc(16 * var(--window-unit));
3039
3095
  }
3040
3096
 
3041
- .xFSZwa_field:focus-within {
3042
- border-color: var(--esf-text-muted);
3097
+ .L9t91q_icon > img[data-icon="link"] {
3098
+ height: calc(12 * var(--window-unit));
3099
+ margin: 0 calc(2 * var(--window-unit));
3100
+ opacity: .6;
3101
+ width: calc(12 * var(--window-unit));
3043
3102
  }
3044
3103
 
3045
- .xFSZwa_filters {
3046
- gap: calc(4 * var(--browser-unit));
3047
- margin: calc(4 * var(--browser-unit)) 0 0;
3048
- border: none;
3049
- min-width: 0;
3050
- padding: 0;
3104
+ .L9t91q_icon:focus-visible, .L9t91q_tool:focus-visible {
3105
+ outline: var(--window-unit) solid var(--esf-text);
3106
+ }
3107
+
3108
+ .L9t91q_violations {
3109
+ gap: calc(14 * var(--window-unit));
3110
+ left: calc(20 * var(--window-unit));
3111
+ top: calc(62 * var(--window-unit));
3051
3112
  display: flex;
3052
3113
  }
3053
3114
 
3054
- .xFSZwa_tree {
3055
- margin-top: calc(8 * var(--browser-unit));
3056
- flex: 1;
3057
- min-height: 0;
3058
- overflow-y: auto;
3115
+ .L9t91q_violation {
3116
+ height: calc(28 * var(--window-unit));
3117
+ width: calc(28 * var(--window-unit));
3118
+ position: relative;
3059
3119
  }
3060
3120
 
3061
- .xFSZwa_empty {
3062
- color: var(--esf-text-muted);
3063
- font-size: calc(20 * var(--browser-unit));
3064
- margin: calc(24 * var(--browser-unit)) 0 0;
3065
- text-align: center;
3121
+ .L9t91q_violation, .L9t91q_alert {
3122
+ --colour: var(--esf-violation-notice);
3066
3123
  }
3067
3124
 
3068
- .xFSZwa_hull {
3069
- font-weight: 600;
3125
+ .L9t91q_violation:before {
3126
+ background: var(--colour);
3127
+ content: "";
3128
+ mask: var(--texture) center / 100% 100%;
3129
+ position: absolute;
3130
+ inset: 0;
3070
3131
  }
3071
3132
 
3072
- .xFSZwa_counts {
3073
- display: flex;
3133
+ .L9t91q_violation[data-kind="error"], .L9t91q_alert[data-kind="error"] {
3134
+ --colour: var(--esf-violation-error);
3074
3135
  }
3075
3136
 
3076
- .xFSZwa_count {
3077
- align-items: center;
3078
- gap: calc(3 * var(--browser-unit));
3079
- min-width: calc(39 * var(--browser-unit));
3080
- display: flex;
3137
+ .L9t91q_violation[data-kind="skill"], .L9t91q_alert[data-kind="skill"] {
3138
+ --colour: var(--esf-violation-skill);
3081
3139
  }
3082
3140
 
3083
- .xFSZwa_count > img, .xFSZwa_kind > img {
3084
- height: calc(12 * var(--browser-unit));
3085
- width: calc(12 * var(--browser-unit));
3086
- display: block;
3141
+ .L9t91q_alert {
3142
+ display: contents;
3087
3143
  }
3088
3144
 
3089
- .xFSZwa_unseen {
3090
- clip-path: inset(50%);
3091
- white-space: nowrap;
3092
- width: 1px;
3093
- height: 1px;
3094
- position: absolute;
3095
- overflow: hidden;
3145
+ .L9t91q_alertTitle {
3146
+ color: var(--colour);
3147
+ text-transform: uppercase;
3096
3148
  }
3097
3149
 
3098
- .xFSZwa_kind {
3099
- margin-right: calc(5 * var(--browser-unit));
3100
- vertical-align: middle;
3101
- display: inline-block;
3150
+ .L9t91q_alertLine {
3151
+ align-items: center;
3152
+ gap: calc(8 * var(--window-unit));
3153
+ display: flex;
3102
3154
  }
3103
3155
 
3104
- .xFSZwa_flyable {
3105
- background: var(--esf-flyable);
3106
- height: calc(12 * var(--browser-unit));
3156
+ .L9t91q_alertLine:before {
3157
+ background: var(--colour);
3158
+ content: "";
3159
+ height: 1.4em;
3107
3160
  mask: var(--texture) center / 100% 100%;
3108
- width: calc(12 * var(--browser-unit));
3109
3161
  flex: none;
3162
+ width: 1.4em;
3163
+ }
3164
+
3165
+ .L9t91q_count {
3166
+ left: calc(100% - 2 * var(--window-unit));
3167
+ top: calc(-2 * var(--window-unit));
3168
+ font-size: .85em;
3169
+ line-height: 1;
3170
+ position: absolute;
3110
3171
  }
3111
3172
 
3112
- .xFSZwa_flyable[data-missing] {
3113
- background: var(--esf-not-flyable);
3173
+ .L9t91q_tools {
3174
+ left: calc(16 * var(--window-unit));
3175
+ top: calc(125 * var(--window-unit));
3114
3176
  }
3115
3177
 
3116
- .xFSZwa_simulate {
3117
- cursor: pointer;
3118
- opacity: .9;
3119
- background: none;
3178
+ .L9t91q_panels {
3179
+ right: calc(11 * var(--window-unit));
3180
+ top: calc(167 * var(--window-unit));
3181
+ }
3182
+
3183
+ .L9t91q_tool {
3184
+ background: var(--esf-button);
3185
+ border-radius: 0 calc(5 * var(--window-unit)) calc(5 * var(--window-unit)) 0;
3186
+ box-shadow: inset calc(-1 * var(--window-unit)) 0 var(--esf-button-edge);
3187
+ cursor: default;
3188
+ height: calc(39 * var(--window-unit));
3189
+ width: calc(45 * var(--window-unit));
3120
3190
  border: none;
3121
- flex: none;
3191
+ justify-content: center;
3192
+ align-items: center;
3122
3193
  padding: 0;
3123
3194
  display: flex;
3124
3195
  }
3125
3196
 
3126
- .xFSZwa_simulate:hover, .xFSZwa_simulate:focus-visible {
3127
- opacity: 1;
3197
+ .L9t91q_panels .L9t91q_tool {
3198
+ border-radius: calc(5 * var(--window-unit)) 0 0 calc(5 * var(--window-unit));
3199
+ box-shadow: inset var(--window-unit) 0 var(--esf-button-edge);
3200
+ width: calc(42 * var(--window-unit));
3128
3201
  }
3129
3202
 
3130
- .xFSZwa_simulate:focus-visible {
3131
- outline: var(--browser-unit) solid var(--esf-text);
3203
+ .L9t91q_tools .L9t91q_tool[aria-expanded="true"] {
3204
+ background: var(--esf-button-active);
3205
+ box-shadow: inset calc(-1 * var(--window-unit)) 0 var(--esf-button-active-edge);
3132
3206
  }
3133
3207
 
3134
- .xFSZwa_simulate > img {
3135
- height: calc(22 * var(--browser-unit));
3136
- width: calc(22 * var(--browser-unit));
3208
+ .L9t91q_panels .L9t91q_tool[aria-expanded="true"] {
3209
+ background: var(--esf-button-active);
3210
+ box-shadow: inset var(--window-unit) 0 var(--esf-button-active-edge);
3137
3211
  }
3138
3212
 
3139
- .xFSZwa_info {
3140
- opacity: .6;
3141
- background: none;
3142
- border: none;
3143
- flex: none;
3144
- padding: 0;
3145
- display: flex;
3213
+ .L9t91q_tools .L9t91q_tool > img {
3214
+ height: calc(40 * var(--window-unit));
3215
+ width: calc(40 * var(--window-unit));
3146
3216
  }
3147
3217
 
3148
- .xFSZwa_info:hover, .xFSZwa_info:focus-visible {
3149
- opacity: 1;
3218
+ .L9t91q_panels .L9t91q_tool > img {
3219
+ height: calc(20 * var(--window-unit));
3220
+ width: calc(20 * var(--window-unit));
3150
3221
  }
3151
3222
 
3152
- .xFSZwa_info:focus-visible {
3153
- outline: var(--browser-unit) solid var(--esf-text);
3223
+ .L9t91q_bays {
3224
+ gap: calc(4 * var(--window-unit));
3225
+ bottom: calc(17 * var(--window-unit));
3226
+ left: calc(19 * var(--window-unit));
3227
+ display: grid;
3154
3228
  }
3155
3229
 
3156
- .xFSZwa_info > img {
3157
- height: calc(16 * var(--browser-unit));
3158
- width: calc(16 * var(--browser-unit));
3230
+ .L9t91q_bay {
3231
+ color: inherit;
3232
+ align-items: center;
3233
+ column-gap: calc(5 * var(--window-unit));
3234
+ cursor: default;
3235
+ font: inherit;
3236
+ line-height: calc(13 * var(--window-unit));
3237
+ background: none;
3238
+ border: none;
3239
+ grid-template-columns: repeat(4, auto);
3240
+ justify-content: start;
3241
+ padding: 0;
3242
+ display: grid;
3159
3243
  }
3160
3244
 
3161
- .xFSZwa_dragImage {
3245
+ .L9t91q_bayAnchor {
3246
+ anchor-name: var(--bay-anchor);
3247
+ }
3248
+
3249
+ .L9t91q_bay > * {
3162
3250
  pointer-events: none;
3163
- position: fixed;
3164
- top: 0;
3165
- left: -1000px;
3166
3251
  }
3167
3252
 
3168
- .xFSZwa_actions {
3169
- gap: calc(8 * var(--browser-unit));
3170
- margin-top: calc(8 * var(--browser-unit));
3171
- display: flex;
3253
+ .L9t91q_bay:focus-visible {
3254
+ outline: var(--window-unit) solid var(--esf-text);
3172
3255
  }
3173
3256
 
3174
- .xFSZwa_action {
3175
- background: var(--esf-button);
3176
- border: var(--browser-unit) solid var(--esf-button-edge);
3177
- color: var(--esf-text);
3178
- cursor: pointer;
3179
- font: inherit;
3180
- height: calc(32 * var(--browser-unit));
3181
- min-width: calc(80 * var(--browser-unit));
3182
- padding: 0 calc(16 * var(--browser-unit));
3257
+ .L9t91q_bay > img {
3258
+ height: calc(32 * var(--window-unit));
3259
+ width: calc(32 * var(--window-unit));
3260
+ grid-area: 1 / 1 / 3;
3183
3261
  }
3184
3262
 
3185
- .xFSZwa_action:hover:not(:disabled), .xFSZwa_action:focus-visible {
3186
- background: var(--esf-button-active);
3187
- border-color: var(--esf-button-active-edge);
3263
+ .L9t91q_used, .L9t91q_total {
3264
+ grid-column: 3;
3265
+ justify-self: end;
3188
3266
  }
3189
3267
 
3190
- .xFSZwa_action:disabled {
3191
- color: var(--esf-text-muted);
3192
- cursor: default;
3268
+ .L9t91q_used {
3269
+ grid-row: 1;
3193
3270
  }
3194
3271
 
3195
- .xFSZwa_copyAnchor {
3196
- anchor-name: --fit-copy;
3197
- display: flex;
3272
+ .L9t91q_slash, .L9t91q_total, .L9t91q_unit {
3273
+ grid-row: 2;
3198
3274
  }
3199
3275
 
3200
- .xFSZwa_copy {
3201
- min-width: 0;
3202
- width: calc(32 * var(--browser-unit));
3203
- justify-content: center;
3204
- align-items: center;
3205
- padding: 0;
3206
- display: flex;
3276
+ .L9t91q_slash {
3277
+ grid-column: 2;
3207
3278
  }
3208
3279
 
3209
- .xFSZwa_copy > img {
3210
- height: calc(16 * var(--browser-unit));
3211
- width: calc(16 * var(--browser-unit));
3280
+ .L9t91q_history {
3281
+ bottom: calc(17 * var(--window-unit));
3282
+ left: calc(199 * var(--window-unit));
3212
3283
  }
3213
3284
 
3214
- .xFSZwa_copy:disabled > img {
3215
- opacity: .4;
3285
+ .L9t91q_services {
3286
+ gap: calc(4 * var(--window-unit));
3287
+ bottom: calc(38 * var(--window-unit));
3288
+ left: calc(164 * var(--window-unit));
3289
+ display: flex;
3216
3290
  }
3217
3291
 
3218
- .xFSZwa_menu {
3219
- background: var(--esf-menu-bg);
3220
- border: var(--browser-unit) solid var(--esf-input-border);
3221
- color: var(--esf-text);
3222
- font-family: var(--esf-font);
3223
- font-size: calc(var(--esf-font-size) * var(--esf-scale, 1));
3224
- margin: calc(4 * var(--browser-unit)) 0;
3225
- padding: calc(6 * var(--browser-unit)) 0;
3226
- position-anchor: --fit-copy;
3227
- position-area: top span-right;
3228
- position-try-fallbacks: flip-block;
3229
- inset: auto;
3292
+ .L9t91q_resources {
3293
+ gap: calc(10 * var(--window-unit));
3294
+ line-height: calc(16 * var(--window-unit));
3295
+ right: calc(13 * var(--window-unit));
3296
+ bottom: calc(17 * var(--window-unit));
3297
+ text-align: right;
3298
+ display: grid;
3230
3299
  }
3231
3300
 
3232
- .xFSZwa_menu > button {
3233
- color: inherit;
3234
- cursor: pointer;
3235
- font: inherit;
3236
- padding: calc(5 * var(--browser-unit)) calc(16 * var(--browser-unit));
3237
- text-align: left;
3238
- background: none;
3239
- border: none;
3240
- width: 100%;
3241
- display: block;
3301
+ .L9t91q_resource {
3302
+ gap: calc(2 * var(--window-unit));
3303
+ display: grid;
3242
3304
  }
3243
3305
 
3244
- .xFSZwa_menu > button:hover, .xFSZwa_menu > button:focus-visible {
3245
- background: var(--esf-menu-hover);
3246
- outline: none;
3306
+ .L9t91q_title {
3307
+ font-weight: 600;
3247
3308
  }
3248
3309
 
3249
- .xFSZwa_form {
3250
- gap: calc(8 * var(--browser-unit));
3251
- width: min(calc(420 * var(--browser-unit)), 80vw);
3252
- flex-direction: column;
3253
- display: flex;
3310
+ .L9t91q_resource[data-change="better"] .L9t91q_free {
3311
+ color: var(--esf-good);
3254
3312
  }
3255
3313
 
3256
- .xFSZwa_form > label {
3257
- color: var(--esf-text-muted);
3314
+ .L9t91q_resource[data-change="worse"] .L9t91q_free {
3315
+ color: var(--esf-bad);
3258
3316
  }
3259
3317
 
3260
- .xFSZwa_form > input, .xFSZwa_form > textarea {
3261
- background: var(--esf-input-bg);
3262
- border: var(--browser-unit) solid var(--esf-input-border);
3263
- color: var(--esf-text);
3264
- font: inherit;
3318
+ .L9t91q_bay[data-over], .L9t91q_resource[data-over] > :last-child, .L9t91q_resource[data-over] .L9t91q_free {
3319
+ color: var(--esf-violation-error);
3265
3320
  }
3266
3321
 
3267
- .xFSZwa_form > textarea {
3268
- resize: vertical;
3269
- font-family: ui-monospace, monospace;
3322
+ .L9t91q_browser, .L9t91q_statistics {
3323
+ bottom: calc(16 * var(--window-unit));
3324
+ top: calc(64 * var(--window-unit));
3325
+ position: absolute;
3326
+ overflow: hidden;
3270
3327
  }
3271
3328
 
3272
- .xFSZwa_importError {
3273
- color: var(--esf-bad);
3274
- margin: 0;
3329
+ .L9t91q_browser {
3330
+ left: calc(15 * var(--window-unit));
3331
+ width: calc(393 * var(--window-unit));
3275
3332
  }
3276
3333
 
3277
- .xFSZwa_confirm {
3278
- max-width: min(calc(360 * var(--browser-unit)), 80vw);
3334
+ .L9t91q_statistics {
3335
+ left: calc(700 * var(--window-unit) + var(--browser-width));
3336
+ transition: left .2s;
3337
+ right: 0;
3279
3338
  }
3280
3339
 
3281
- .xFSZwa_confirm > p {
3282
- margin: 0 0 calc(12 * var(--browser-unit));
3340
+ .L9t91q_statistics > .L9t91q_slide {
3341
+ width: calc(280 * var(--window-unit));
3283
3342
  }
3284
3343
 
3285
- .xFSZwa_dialogButtons {
3286
- gap: calc(8 * var(--browser-unit));
3287
- justify-content: flex-end;
3288
- display: flex;
3344
+ .L9t91q_slide {
3345
+ visibility: hidden;
3346
+ height: 100%;
3347
+ transition: transform .2s, visibility .2s;
3289
3348
  }
3290
3349
 
3291
- .xFSZwa_views {
3292
- margin: 0 0 0 calc(4 * var(--browser-unit));
3293
- border: none;
3294
- align-self: stretch;
3295
- min-width: 0;
3296
- padding: 0;
3297
- display: flex;
3350
+ .L9t91q_browser > .L9t91q_slide, .L9t91q_statistics > .L9t91q_slide {
3351
+ transform: translateX(-100%);
3298
3352
  }
3299
3353
 
3300
- .xFSZwa_views button {
3301
- align-items: center;
3354
+ .L9t91q_window[data-browser] > .L9t91q_browser > .L9t91q_slide, .L9t91q_window[data-statistics] > .L9t91q_statistics > .L9t91q_slide {
3355
+ visibility: visible;
3356
+ transform: none;
3302
3357
  }
3303
3358
 
3304
- .xFSZwa_views [aria-pressed="true"] {
3305
- background: var(--esf-tab-active);
3306
- opacity: 1;
3359
+ @media (prefers-reduced-motion: reduce) {
3360
+ .L9t91q_window, .L9t91q_frame, .L9t91q_statistics, .L9t91q_slide {
3361
+ transition: none;
3362
+ }
3307
3363
  }
3308
3364
  .lebA7G_statistics {
3309
3365
  --statistics-unit: calc(1px * var(--esf-scale, 1));