:root{--pw-mark-data:#8a91a0;--pw-mark-calendar:#d98a00;--pw-mark-chat:#7b5cff;--pw-term-ink-2:rgba(230,233,242,.6);--pw-term-ink:#e6e9f2;--pw-term-ok:#7fe0b4}


.pw-in-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-top:8px}
.pw-in-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:auto auto;gap:4px 16px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.pw-in-item[hidden]{display:none}
.pw-in-item > div{grid-row:1 / 3;display:grid;gap:4px;min-width:0}
.pw-in-item b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.pw-in-item div span{font-size:14px;line-height:1.5;color:var(--ink-2)}
.pw-in-item em,.pw-in-item small{font:400 12px/1 var(--font-mono);font-style:normal;color:var(--ink-3);text-align:right;white-space:nowrap}
.pw-in-item small{color:var(--ink-2)}
.pw-in-mark{grid-row:1 / 3;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;font:500 14px/1 var(--font-mono);color:var(--ink);background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line);transition:background-color var(--t-light) var(--ease-primary),color var(--t-light) var(--ease-primary)}
.pw-in-item:hover .pw-in-mark{background:var(--ink);color:#fff}
.pw-in-mark--crm{box-shadow:inset 0 0 0 1px var(--line),inset 0 -3px 0 var(--accent)}
.pw-in-mark--email{box-shadow:inset 0 0 0 1px var(--line),inset 0 -3px 0 #12a46b}
.pw-in-mark--data{box-shadow:inset 0 0 0 1px var(--line),inset 0 -3px 0 var(--pw-mark-data)}
.pw-in-mark--calendar{box-shadow:inset 0 0 0 1px var(--line),inset 0 -3px 0 var(--pw-mark-calendar)}
.pw-in-mark--chat{box-shadow:inset 0 0 0 1px var(--line),inset 0 -3px 0 var(--pw-mark-chat)}
.pw-in-empty{padding:40px 0;font-size:16px;color:var(--ink-2);display:flex;gap:12px;flex-wrap:wrap}
.pw-in-empty[hidden]{display:none}

.pw-in-code__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.pw-in-code__copy .pw-lead{margin-top:20px}
.pw-in-facts{list-style:none;display:grid;margin-top:32px;border-top:1px solid var(--line-2)}
.pw-in-facts li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line-2);font-size:15px}
.pw-in-facts b{font:500 13px/1.6 var(--font-mono);color:var(--ink)}
.pw-in-facts span{color:var(--ink-2)}
.pw-in-term{position:relative;border-radius:var(--radius-l);background:#0b0d12;color:var(--pw-term-ink);padding:12px;box-shadow:0 30px 70px rgba(11,13,18,.18)}
.pw-in-term__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 4px 12px}
.pw-in-term .pw-tabs__list{position:relative;display:inline-flex;gap:4px;padding:4px;border-radius:10px;background:rgba(255,255,255,.06)}
.pw-in-term .pw-tabs__pill{position:absolute;top:4px;left:0;height:calc(100% - 8px);width:0;border-radius:7px;background:rgba(255,255,255,.12);will-change:transform,width}
.pw-in-term .pw-tabs__tab{position:relative;z-index:1;height:34px;padding:0 14px;border-radius:7px;font:500 13px/1 var(--font-mono);color:var(--pw-term-ink-2);transition:color var(--t-light) var(--ease-primary)}
.pw-in-term .pw-tabs__tab[aria-selected="true"]{color:#fff}
.pw-in-copy{height:34px;padding:0 14px;border-radius:8px;font:500 13px/1 var(--font-mono);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:background-color var(--t-light) var(--ease-primary)}
.pw-in-copy:hover{background:rgba(255,255,255,.1)}
.pw-in-pre{margin:0;padding:20px 16px 28px;overflow-x:auto;font:400 14px/1.75 var(--font-mono);color:var(--pw-term-ink);tab-size:2}
.pw-in-pre code{display:grid}
.pw-in-pre code span{display:block;min-height:1.75em;white-space:pre}
.pw-in-term__msg{min-height:1.4em;padding:0 16px 8px;font:400 12px/1.4 var(--font-mono);color:var(--pw-term-ok)}
.pw-in-term > .pw-demo{position:absolute;right:16px;bottom:-12px;background:var(--bg)}

@media (max-width:991px){
  .pw-in-list{grid-template-columns:minmax(0,1fr)}
  .pw-in-code__grid{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:600px){
  .pw-in-item{grid-template-columns:40px minmax(0,1fr);gap:4px 14px}
  .pw-in-mark{width:40px;height:40px}
  .pw-in-item em{display:none}
  .pw-in-item small{grid-column:2;grid-row:3;text-align:left}
  .pw-in-item > div{grid-row:1 / 3}
  .pw-in-pre{font-size:12.5px}
  .pw-in-facts li{grid-template-columns:minmax(0,1fr);gap:4px}
}