/* C-33 P&ID editor: the card on the page and the full-window editor (design: canvas PidEditor and friends). */
.pd-card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 22px; border: 1px solid #DCE2EC; border-radius: 10px; background: #fff; }
.pd-card__fig { background: #F3F5FA; border-radius: 6px; padding: 14px; }
.pd-card__fig svg { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 2px 12px rgba(10, 22, 51, .1); }
.pd-card__t { margin: 6px 0 8px; font: 700 24px/1.2 Archivo, sans-serif; color: var(--navy); }
.pd-card__d { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: #3A4460; }
.pd-card__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-go, .pd-go:hover { height: 44px; padding: 0 20px; border: 0; border-radius: 4px; background: var(--blue); color: #fff; font: 600 15px "IBM Plex Sans", sans-serif; cursor: pointer; }
.pd-go:hover { background: var(--blue-dark, #0A2FC7); }
.pd-ghost, .pd-ghost:hover { height: 44px; padding: 0 16px; border: 1px solid #C9D1E3; border-radius: 4px; background: #fff; color: var(--navy); font: 500 14px "IBM Plex Sans", sans-serif; cursor: pointer; }
.pd-card__note { margin: 14px 0 0; font-size: 13px; color: #6A7490; }
.pd-mine { margin-top: 18px; }
.pd-mine ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.pd-mine li { display: flex; gap: 4px; }
.pd-mine li > button:first-child { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border: 1px solid #E3E8F2; border-radius: 4px; background: #fff; text-align: left; cursor: pointer; }
.pd-mine li > button:first-child:hover { border-color: var(--blue); background: #F4F7FF; }
.pd-mine b { font: 600 13.5px "IBM Plex Sans", sans-serif; color: var(--navy); }
.pd-mine span { font: 11.5px "IBM Plex Mono", monospace; color: #6A7490; }
.pd-del { width: 32px; border: 1px solid #E3E8F2; border-radius: 4px; background: #fff; color: #B42318; font-size: 18px; cursor: pointer; }
@media (max-width: 860px) { .pd-card { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ the editor */
html.px-open, html.px-open body { overflow: hidden; }
.px { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: #E9EDF5; color: var(--navy); font-family: "IBM Plex Sans", sans-serif; }
.px[hidden] { display: none; }
.px-top { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 7px 10px; background: var(--navy); color: #fff; }
.px-top__t { font: 700 15px Archivo, sans-serif; margin-right: 4px; }
.px-top__s { font: 11px "IBM Plex Mono", monospace; color: #9FB0D9; margin-right: 10px; }
.px-tb, .px-tb:hover { height: 32px; padding: 0 9px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 4px; background: none; color: #DCE4F7; font: 500 12.5px "IBM Plex Sans", sans-serif; cursor: pointer; white-space: nowrap; }
.px-tb:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.px-tb.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
.px-tb kbd { font: 10px "IBM Plex Mono", monospace; color: #8FA0CC; margin-left: 3px; }
.px-tb.is-on kbd { color: #C9D6FF; }
.px-tb:disabled { opacity: .4; cursor: default; }
.px-export, .px-export:hover { background: #FF6A2B; border-color: #FF6A2B; color: #fff; }
.px-primary, .px-primary:hover { background: #fff; border-color: #fff; color: var(--navy); font-weight: 600; }
.px-sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .18); margin: 0 5px; }
.px-grow { flex: 1; }
.px-save { font: 11px "IBM Plex Mono", monospace; color: #9FB0D9; margin-right: 6px; }
.px-badge { display: inline-block; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #F59E0B; color: #1A1200; font: 700 10.5px/17px "IBM Plex Mono", monospace; text-align: center; }
.px-badge.is-err { background: #EF4444; color: #fff; }
.px-badge[hidden] { display: none; }
.px-close, .px-close:hover { display: inline-flex; align-items: center; justify-content: center; flex: none; align-self: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 4px; background: none; color: #DCE4F7; font: 400 22px/1 "IBM Plex Sans", sans-serif; cursor: pointer; }
.px-close:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.px-close--dark, .px-close--dark:hover { color: #4A5570; }
.px-close--dark:hover { background: #F0F3F9; color: var(--navy); }
.px-ro { display: flex; align-items: center; gap: 10px; padding: 7px 14px; background: #FFF4E8; border-bottom: 1px solid #F2C7A9; font-size: 13px; color: #4A2A18; }
.px-ro[hidden] { display: none; }
.px-ro span { flex: 1; }
.px-main { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 252px minmax(0, 1fr) 300px; transition: grid-template-columns .2s; }
.px.no-lib .px-main { grid-template-columns: 18px minmax(0, 1fr) 300px; }
.px.no-insp .px-main { grid-template-columns: 252px minmax(0, 1fr) 18px; }
.px.no-lib.no-insp .px-main { grid-template-columns: 18px minmax(0, 1fr) 18px; }
.px-lib, .px-insp { position: relative; overflow-y: auto; background: #fff; }
.px-lib { border-right: 1px solid #D5DCEA; padding: 12px 12px 60px; display: flex; flex-direction: column; gap: 8px; }
.px-insp { border-left: 1px solid #D5DCEA; }
.px.no-lib .px-lib > *:not(.px-collapse), .px.no-insp .px-insp > *:not(.px-collapse) { display: none; }
.px-collapse { position: absolute; top: 8px; right: 2px; width: 16px; height: 26px; border: 0; border-radius: 3px; background: #F0F3F9; color: #6A7490; cursor: pointer; font-size: 13px; padding: 0; }
.px-collapse--r { right: auto; left: 2px; }
.px.no-lib .px-collapse { transform: rotate(180deg); }
.px.no-insp .px-collapse--r { transform: rotate(180deg); }
.px-search input { width: 100%; height: 32px; padding: 0 10px; border: 1px solid #C9D1E3; border-radius: 4px; font: 13px "IBM Plex Mono", monospace; }
.px-groups { display: flex; flex-wrap: wrap; gap: 4px; }
.px-gchip, .px-gchip:hover { height: 26px; padding: 0 9px; border: 1px solid #C9D1E3; border-radius: 13px; background: #fff; color: var(--navy); font: 500 11.5px "IBM Plex Mono", monospace; cursor: pointer; }
.px-gchip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.px-h { margin: 8px 0 2px; font: 600 10.5px "IBM Plex Mono", monospace; letter-spacing: .06em; color: #6A7490; text-transform: uppercase; }
.px-syms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.px-sym, .px-sym:hover { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 76px; padding: 6px 3px 5px; border: 1px solid #E3E8F2; border-radius: 4px; background: #fff; color: var(--navy); cursor: grab; }
.px-sym:hover { border-color: var(--blue); background: #F4F7FF; }
.px-sym svg { width: 40px; height: 34px; color: var(--navy); overflow: visible; }
.px-sym span { font-size: 10.5px; line-height: 1.2; text-align: center; color: #2A3450; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.px-sym i { position: absolute; top: 2px; right: 4px; font-style: normal; font-size: 12px; color: #6A7490; cursor: pointer; }
.px-sym--new b { font-size: 26px; font-weight: 400; color: var(--blue); line-height: 34px; }
.px-lines > div { display: flex; flex-direction: column; gap: 3px; }
.px-lt, .px-lt:hover { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid #E3E8F2; border-radius: 4px; background: #fff; color: var(--navy); font-size: 12px; text-align: left; cursor: pointer; }
.px-lt.is-on { border-color: var(--blue); background: #EEF2FF; }
.px-lt svg { width: 54px; height: 14px; flex: none; color: var(--navy); }
.px-tip { margin: 0; font-size: 12px; color: #6A7490; }
.px-stage { position: relative; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.px-status { position: absolute; z-index: 2; top: 8px; left: 10px; right: 10px; display: flex; align-items: center; gap: 4px; pointer-events: none; font: 11.5px "IBM Plex Mono", monospace; color: #4A5570; }
.px-status > * { pointer-events: auto; }
.px-status [data-status-sheet] { background: rgba(255, 255, 255, .9); padding: 4px 8px; border-radius: 3px; }
.px-svg { flex: 1; width: 100%; height: 100%; display: block; outline: none; touch-action: none; user-select: none; -webkit-user-select: none; font-family: "IBM Plex Mono", monospace; }
.px-paper { fill: #fff; filter: drop-shadow(0 2px 8px rgba(10, 22, 51, .16)); }
.px-hit { stroke: transparent; stroke-width: 10px; vector-effect: non-scaling-stroke; pointer-events: stroke; }
.px-it, .px-ln, .px-tx { cursor: move; color: var(--navy); }
.px.is-ro .px-it, .px.is-ro .px-ln, .px.is-ro .px-tx { cursor: default; }
.px-box { fill: transparent; stroke: none; }
.px-it:hover > .px-box, .px-tx:hover > .px-box { fill: rgba(31, 79, 255, .05); }
.px-lab { cursor: grab; }
.px-lab:hover > .px-box { fill: rgba(224, 51, 138, .1); }
.px-ln:hover path:not(.px-hit) { stroke: var(--blue); }
.px-lno { cursor: grab; }
.px-vx { cursor: crosshair; }
.px-mark { cursor: pointer; }
.px-mark .px-mark__x { opacity: 0; transition: opacity .12s; }
.px-mark:hover .px-mark__x { opacity: 1; }
.px-mark:hover .px-mark__box { fill: rgba(217, 45, 32, .07); stroke: #D92D20; stroke-width: 1px; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.px-mini { position: absolute; right: 12px; bottom: 12px; width: 160px; opacity: .92; padding: 6px; background: rgba(255, 255, 255, .95); border: 1px solid #D5DCEA; border-radius: 6px; box-shadow: 0 2px 10px rgba(10, 22, 51, .12); cursor: crosshair; }
.px-mini svg { display: block; width: 100%; height: auto; }
.px-hint { position: absolute; left: 12px; bottom: 12px; right: 220px; font: 11.5px/1.45 "IBM Plex Mono", monospace; color: #4A5570; background: rgba(255, 255, 255, .92); padding: 5px 9px; border-radius: 3px; pointer-events: none; }
.px-hint[hidden], .px-hint:empty { display: none; }
.px-chip, .px-chip:hover { height: 28px; padding: 0 10px; border: 1px solid #C9D1E3; border-radius: 14px; background: #fff; color: var(--navy); font: 500 11.5px "IBM Plex Mono", monospace; cursor: pointer; white-space: nowrap; }
.px-chip:hover { border-color: var(--blue); }
.px-chip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.px-chip:disabled { opacity: .45; cursor: default; }
.px-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }

/* inspector */
.px-ins { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 40px; }
.px-ins__head { display: flex; gap: 10px; align-items: center; }
.px-ins__head svg { flex: none; padding: 4px; border: 1px solid #E3E8F2; border-radius: 4px; color: var(--navy); overflow: visible; }
.px-ins__head b { display: block; font: 700 17px Archivo, sans-serif; }
.px-ins__head span { font-size: 12px; color: #4A5570; }
.px-f { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #4A5570; }
.px-f i { font-style: normal; color: #9AA4BC; }
.px-f input, .px-f select, .px-f textarea, .px-eng input { width: 100%; min-height: 32px; padding: 5px 9px; border: 1px solid #C9D1E3; border-radius: 4px; background: #fff; font: 13px "IBM Plex Mono", monospace; color: var(--navy); box-sizing: border-box; }
.px-f textarea { resize: vertical; }
.px-f input:focus, .px-f select:focus, .px-f textarea:focus { outline: 2px solid rgba(31, 79, 255, .25); border-color: var(--blue); }
.px-f--inline { flex-direction: row; align-items: center; gap: 6px; }
.px-f--inline input { width: 80px; }
.px-fr { display: flex; gap: 4px; }
.px-auto, .px-auto:hover { flex: none; padding: 0 10px; border: 0; border-radius: 4px; background: var(--navy); color: #fff; font: 600 11.5px "IBM Plex Sans", sans-serif; cursor: pointer; }
.px-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.px-ck { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: #2A3450; }
.px-seg { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: 6px; background: #F0F3F9; }
.px-seg button { padding: 5px 9px; border: 0; border-radius: 4px; background: none; font: 500 11.5px "IBM Plex Mono", monospace; color: #4A5570; cursor: pointer; }
.px-seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.px-isa { margin: 0; font: 11.5px "IBM Plex Mono", monospace; color: #1E4D2B; background: #F3FBF6; padding: 5px 8px; border-radius: 4px; }
.px-isa.is-bad { color: #8A1C12; background: #FEF3F2; }
.px-meta { margin: 0; font: 11px "IBM Plex Mono", monospace; color: #6A7490; }
.px-note { margin: 0; font-size: 12px; line-height: 1.45; color: #6A7490; }
.px-bom { display: flex; flex-direction: column; gap: 3px; }
.px-bom__r { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 6px; align-items: center; font: 11.5px "IBM Plex Mono", monospace; }
.px-bom__n { color: #C2410C; }
.px-bom__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #2A3450; }
.px-bom__r input { grid-column: 2; height: 26px; padding: 2px 6px; border: 1px solid #E3E8F2; border-radius: 3px; font: 11.5px "IBM Plex Mono", monospace; }
.px-check { display: block; width: 100%; padding: 6px 9px; border: 0; border-left: 3px solid; border-radius: 3px; background: #F8F9FC; font-size: 12px; line-height: 1.4; text-align: left; color: #2A3450; cursor: pointer; }
.px-check--error { border-color: #D92D20; background: #FEF3F2; }
.px-check--warn { border-color: #F59E0B; background: #FFFAEB; }
.px-check--info { border-color: #9AA6C4; }

/* panels */
.px-panel { position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; width: min(460px, 100%); display: flex; flex-direction: column; background: #fff; border-left: 1px solid #D5DCEA; box-shadow: -8px 0 24px rgba(10, 22, 51, .12); }
.px-panel[hidden] { display: none; }
.px-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #E3E8F2; font: 700 16px Archivo, sans-serif; }
.px-panel__body { flex: 1; overflow-y: auto; padding: 14px 16px 40px; display: flex; flex-direction: column; gap: 9px; }
.px-logo { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
.px-drop { display: flex; align-items: center; justify-content: center; height: 80px; border: 1.5px dashed #9AA6C4; border-radius: 6px; font: 11px "IBM Plex Mono", monospace; color: #4A5570; text-align: center; cursor: pointer; overflow: hidden; }
.px-drop img { max-width: 100%; max-height: 100%; object-fit: contain; }
.px-eng { display: grid; grid-template-columns: 120px minmax(0, 1fr) 96px 26px; gap: 5px; align-items: center; }
.px-eng input { min-height: 30px; font-size: 12px; }
.px-eng button { border: 0; background: none; color: #B42318; font-size: 17px; cursor: pointer; }
.px-markrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #F2C7A9; background: #FFF8F3; border-radius: 8px; font-size: 12px; color: #4A2A18; }
.px-markrow span:nth-child(2) { flex: 1; }
.px-plus { font: 700 10px "IBM Plex Mono", monospace; color: #fff; background: linear-gradient(90deg, #FF6A2B, #7A3FF2); border-radius: 3px; padding: 2px 6px; }
.px-tabs { margin-bottom: 4px; }
.px-tablewrap { overflow: auto; max-height: 56vh; border: 1px solid #E3E8F2; border-radius: 4px; }
.px-table { width: 100%; border-collapse: collapse; font: 11.5px "IBM Plex Mono", monospace; }
.px-table th { position: sticky; top: 0; background: #F3F5FA; text-align: left; padding: 6px 8px; font-weight: 600; color: #4A5570; }
.px-table td { padding: 5px 8px; border-top: 1px solid #EEF1F6; color: #2A3450; }
.px-table tr:hover td { background: #F4F7FF; cursor: pointer; }
.px-xrow, .px-xrow:hover { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid #DCE2EC; border-radius: 6px; background: #fff; text-align: left; cursor: pointer; }
.px-xrow:hover { border-color: var(--blue); background: #F7F9FF; }
.px-xrow span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.px-xrow strong { font: 600 14px "IBM Plex Sans", sans-serif; color: var(--navy); }
.px-xrow em { font-style: normal; font-size: 12px; color: #4A5570; }
.px-xrow select { height: 28px; font: 12px "IBM Plex Mono", monospace; }
.px-xico { flex: none; width: 42px; height: 42px; border-radius: 5px; display: flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; font: 700 11px "IBM Plex Mono", monospace; }
.px-xico--pdf { background: #B42318; } .px-xico--dxf { background: var(--blue); } .px-xico--svg, .px-xico--png { background: #7A3FF2; } .px-xico--xlsx { background: #12803C; }
.px-callout { margin: 4px 0 0; padding: 10px 12px; border-radius: 6px; background: #EEF2FF; color: #1E3A8A; font-size: 12.5px; line-height: 1.5; }
.px-rev { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid #DCE2EC; border-radius: 6px; }
.px-rev.is-cur { border-color: var(--blue); background: #F7F9FF; }
.px-rev__l { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 4px; background: var(--navy); color: #fff; font: 700 15px "IBM Plex Mono", monospace; }
.px-rev__l--draft { background: #FF6A2B; }
.px-rev > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.px-rev .px-row { flex-direction: row; }
.px-rev strong { font-size: 13.5px; }
.px-rev span { font: 11px "IBM Plex Mono", monospace; color: #6A7490; }
.px-rev span input { width: 110px; height: 22px; font: 11px "IBM Plex Mono", monospace; border: 1px solid #E3E8F2; border-radius: 3px; }
.px-rev textarea { width: 100%; font: 12.5px "IBM Plex Sans", sans-serif; border: 1px solid #E3E8F2; border-radius: 4px; padding: 5px 7px; resize: vertical; box-sizing: border-box; }
.px-rev select { height: 28px; border-radius: 14px; border: 1px solid #C9D1E3; font: 11.5px "IBM Plex Mono", monospace; padding: 0 8px; }
.px-legend { display: flex; gap: 10px; align-items: center; font: 11.5px "IBM Plex Mono", monospace; color: #4A5570; }
.px-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: -6px; }

/* modals: symbol maker and the Pro+ popup */
.px-modal { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(10, 22, 51, .35); }
.px-modal[hidden] { display: none; }
.px-pop { width: min(440px, calc(100% - 32px)); background: #fff; border-radius: 10px; box-shadow: 0 12px 40px rgba(10, 22, 51, .3); padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.px-pop__h { display: flex; align-items: center; gap: 10px; }
.px-pop__h p { margin: 0; font: 700 17px Archivo, sans-serif; }
.px-pop > p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #4A5570; }
.px-pop__a { display: flex; gap: 8px; justify-content: flex-end; }
.px-btn, .px-btn:hover { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 4px; background: var(--blue); color: #fff; font: 600 13px "IBM Plex Sans", sans-serif; text-decoration: none; }
.px-maker { width: min(1200px, calc(100% - 24px)); height: min(820px, calc(100% - 24px)); display: flex; flex-direction: column; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 12px 40px rgba(10, 22, 51, .3); }
.px-maker__main { flex: 1; min-height: 0; display: grid; grid-template-columns: 230px minmax(0, 1fr) 290px; }
.px-maker__side, .px-maker__insp { overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.px-maker__side { border-right: 1px solid #E3E8F2; }
.px-maker__insp { border-left: 1px solid #E3E8F2; }
.px-maker__stage { background: #E9EDF5; display: flex; padding: 20px; min-width: 0; }
.px-maker__stage svg { flex: 1; background: #fff; border-radius: 4px; cursor: crosshair; font-family: "IBM Plex Mono", monospace; }
.px-pi, .px-pi:hover { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 6px 9px; border: 1px solid #E3E8F2; border-radius: 4px; background: #fff; font: 12px "IBM Plex Mono", monospace; color: var(--navy); cursor: pointer; text-align: left; }
.px-pi.is-on { border-color: var(--blue); background: #EEF2FF; }
.px-pi i { font-style: normal; color: #B42318; font-size: 15px; }
.px-port { display: flex; gap: 8px; align-items: center; font: 12px "IBM Plex Mono", monospace; }
.px-port b { color: #C2410C; }
.px-port span { flex: 1; color: #4A5570; }
.px-port button { border: 0; background: none; color: #B42318; cursor: pointer; font-size: 15px; }
.px-maker__insp .px-row input { width: 80px; }
.px-toast { position: absolute; z-index: 20; left: 50%; bottom: 22px; transform: translateX(-50%); max-width: min(640px, calc(100% - 40px)); padding: 10px 16px; border-radius: 6px; background: var(--navy); color: #fff; font-size: 13px; line-height: 1.45; box-shadow: 0 8px 24px rgba(10, 22, 51, .3); }
.px-toast[hidden] { display: none; }
.px-toast a { color: #9FC1FF; text-decoration: underline; }
@media (max-width: 1780px) { .px-tb kbd { display: none; } .px-tb { padding: 0 7px; } .px-top__s { display: none; } }
@media (max-width: 1100px) {
  .px-main { grid-template-columns: 200px minmax(0, 1fr) 0; }
  .px-insp { display: none; }
  .px-tb kbd { display: none; }
}
@media (max-width: 700px) {
  .px-main { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .px-lib { display: none; }
  .px-mini { display: none; }
}
.px-wm, .px-wm:hover { display: inline-flex; align-items: center; gap: 6px; border-color: rgba(255, 106, 43, .55); }
.px-wm.is-off { border-color: rgba(255, 255, 255, .14); }
.px-wm .px-plus { padding: 1px 5px; font-size: 9.5px; }