/* ספריית הסקילים: עמוד סקיל ועמוד הספרייה (נבנים מ-tools/build-skills.mjs) */
.sk-hero{background:var(--bg-alt);padding-top:clamp(120px,14vw,160px);padding-bottom:clamp(40px,6vw,64px);}
.crumbs{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted);margin-bottom:22px;}
.crumbs a{color:var(--muted);} .crumbs a:hover{color:var(--ink);}
.sk-hero .h1{direction:ltr;text-align:right;unicode-bidi:plaintext;}
.sk-hero .lead{max-width:46ch;margin-top:16px;}
.sk-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.sk-meta span{display:flex;flex-direction:column;gap:2px;background:#fff;border-radius:16px;padding:10px 16px;font-weight:600;font-size:15px;box-shadow:var(--shadow);}
.sk-meta small{font-size:12px;font-weight:500;color:var(--muted);}
.sk-ctas{margin-top:28px;gap:22px;}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}

.sk-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(28px,5vw,70px);padding-block:clamp(40px,6vw,70px);align-items:start;}
.sk-toc{position:sticky;top:96px;font-size:14px;}
.sk-toc b{display:block;font-size:13px;color:var(--muted);font-weight:600;margin-bottom:10px;}
.sk-toc ol{list-style:none;padding:0;margin:0;display:grid;gap:2px;border-inline-start:1px solid var(--hair);}
.sk-toc a{display:block;color:var(--ink-2);padding:6px 14px;margin-inline-start:-1px;border-inline-start:2px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease);}
.sk-toc a:hover{color:var(--ink);text-decoration:none;border-color:var(--hair-2);}
.sk-toc a.on{color:var(--ink);font-weight:600;border-color:var(--accent);}
.sk-body{max-width:760px;}
.sk-body section{padding-block:10px 36px;scroll-margin-top:96px;}
.sk-body section+section{border-top:1px solid var(--hair);padding-top:36px;}
.sk-body .h3{margin-bottom:16px;}
.sk-body p{margin:0 0 14px;font-size:18px;line-height:1.7;color:var(--ink-2);}
.sk-body .lead-sm{font-size:21px;line-height:1.55;font-weight:500;color:var(--ink);letter-spacing:-.012em;}
.sk-body .small,.small{font-size:15px;}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px;}
.ticks li{position:relative;padding-inline-start:30px;font-size:17px;line-height:1.6;color:var(--ink-2);}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:7px;width:18px;height:18px;border-radius:50%;background:var(--bg-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-8.5' fill='none' stroke='%230071e3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;}
.ticks.tips li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1 2V16h5.2v-.2c0-.8.4-1.5 1-2A6 6 0 0 0 12 3Z' fill='none' stroke='%230071e3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.feat{background:var(--bg-alt);border-radius:20px;padding:20px 22px;}
.feat h3{margin:0 0 6px;font-size:17px;font-weight:700;letter-spacing:-.01em;}
.feat p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2);}
.inside{display:grid;gap:8px;}
.inside div{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:14px;align-items:baseline;padding:12px 16px;border-radius:14px;background:var(--bg-alt);}
.inside code{font-family:var(--mono);font-size:13.5px;color:var(--ink);direction:ltr;text-align:right;}
.inside span{font-size:15.5px;color:var(--ink-2);line-height:1.55;}
.usecase{padding:20px 0 6px;}
.usecase .h4{margin-bottom:12px;}
.usecase .result{margin:12px 0 0;font-size:16px;}
.cblock{margin:10px 0;}
.code.mixed{unicode-bidi:plaintext;text-align:start;direction:rtl;font-family:var(--mono);}
.code.mixed .he{font-family:var(--sans);font-size:15px;line-height:1.6;color:#fff;}
.install{background:var(--bg-alt);border-radius:var(--r-xl);padding:clamp(24px,4vw,40px)!important;border-top:0!important;margin-block:10px 20px;}
.install+section{border-top:0!important;}
.install .h2{font-size:clamp(28px,3.6vw,44px);margin-bottom:10px;}
.method{background:#fff;border-radius:24px;padding:clamp(18px,3vw,26px);margin-top:16px;box-shadow:var(--shadow);}
.m-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:8px;}
.m-head p{margin:4px 0 0;font-size:15.5px;}
.m-n{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;}
.note{background:#fff;border-radius:20px;padding:18px 20px;margin-top:14px;box-shadow:var(--shadow);}
.note b{display:block;margin-bottom:6px;font-size:16px;}
.note p{margin:0;font-size:16px;}
.note.ok{box-shadow:0 0 0 1.5px rgba(29,138,78,.25) inset,var(--shadow);}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:12px;}
.steps li{counter-increment:s;position:relative;padding-inline-start:44px;font-size:17px;line-height:1.6;color:var(--ink-2);min-height:30px;}
.steps li::before{content:counter(s);position:absolute;inset-inline-start:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--bg-alt);color:var(--ink);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;}
.qa{border-radius:18px;background:var(--bg-alt);margin-bottom:10px;overflow:hidden;}
.qa summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:600;font-size:17px;display:flex;justify-content:space-between;gap:16px;align-items:center;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::after{content:"";width:12px;height:12px;flex-shrink:0;border-inline-end:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);transform:rotate(45deg);transition:transform .4s var(--ease);margin-top:-6px;}
.qa[open] summary::after{transform:rotate(-135deg);margin-top:4px;}
.qa>div{padding:0 20px 18px;font-size:16.5px;line-height:1.65;color:var(--ink-2);}
.credit p{font-size:15px!important;color:var(--muted)!important;}
.sk-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;background:var(--bg-alt);border-radius:var(--r-xl);padding:clamp(24px,4vw,40px);}
.alt .sk-cta{background:#fff;box-shadow:var(--shadow);}
.sk-cta p{margin:6px 0 0;}
/* cards */
.sk-card .sk-top{display:flex;align-items:center;gap:12px;}
.sk-card .icon-tile{width:40px;height:40px;border-radius:12px;}
.sk-card .icon-tile .ic{width:20px;height:20px;}
.sk-card h3{direction:ltr;text-align:right;unicode-bidi:plaintext;}
.sk-card[hidden]{display:none;}
/* index */
.sx-hero{padding-top:clamp(130px,16vw,190px);padding-bottom:clamp(60px,8vw,100px);}
.sx-hero .display{color:#fff;}
.sx-hero .lead{margin:20px auto 0;}
.sx-count{display:flex;justify-content:center;gap:clamp(24px,6vw,70px);margin-top:36px;flex-wrap:wrap;}
.sx-count div{display:flex;flex-direction:column;gap:4px;}
.sx-count b{font-size:clamp(34px,4.4vw,52px);font-weight:700;letter-spacing:-.03em;color:#fff;line-height:1;}
.sx-count span{color:#a1a1a6;font-size:15px;}
.pack-all{padding:clamp(18px,3vw,28px);}
.pack-all .code{max-height:170px;overflow:auto;}
.pack-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:22px;}
.pack .pack-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.pack-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:6px;}
.pack .repo{font-family:var(--mono);font-size:12px;color:var(--muted);direction:ltr;text-align:right;}
.lib-tools{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.cat-block{margin-top:34px;}
.cat-block[hidden]{display:none;}
.cat-title{margin-bottom:14px;color:var(--muted);}
@media (max-width:1020px){
  .sk-layout{grid-template-columns:minmax(0,1fr);}
  .sk-toc{display:none;}
  .pack-grid{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .feat-grid,.split2{grid-template-columns:1fr;}
  .inside div{grid-template-columns:minmax(0,1fr);gap:4px;}
  .inside code{overflow-wrap:anywhere;}
  .sk-body p{font-size:17px;}
}

.note.warn{box-shadow:0 0 0 1.5px rgba(245,166,35,.35) inset,var(--shadow);margin-top:18px;}
.il{color:var(--accent);font-weight:600;}
#ssrc{margin-inline-end:8px;}

.credit-il{display:flex;gap:16px;align-items:flex-start;margin-top:44px;padding:22px 24px;border-radius:var(--r);background:var(--bg-alt);}
.credit-il p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2);}
.credit-il .icon-tile{flex-shrink:0;}
.by{display:inline-flex;align-items:center;gap:8px;}
.by .av{width:22px;height:22px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--hair);flex-shrink:0;}
.sk-meta .by .av{width:24px;height:24px;}
/* the no-code way first: download the ready file and upload it in the Claude app */
.method.easy{box-shadow:0 0 0 2px rgba(0,113,227,.35),var(--shadow);}
.method.easy .m-n{background:var(--accent);color:#fff;}
.easy-steps{margin-top:16px;gap:16px;}
.easy-steps li b{display:block;color:var(--ink);font-size:17px;margin-bottom:2px;}
.easy-steps li code{font-size:14px;background:var(--bg-alt);padding:2px 7px;border-radius:6px;direction:ltr;unicode-bidi:isolate;}
.easy-steps .dl{margin:8px 0 6px;}
.easy-steps .dl .ic{width:17px;height:17px;}
.easy-steps .small{display:block;}
/* one skill at a time from the pack */
.cat-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px;}
.kitem{display:flex;flex-direction:column;justify-content:space-between;gap:12px;background:#fff;border-radius:18px;padding:16px 18px;box-shadow:0 0 0 1px var(--hair) inset;}
.kitem[hidden]{display:none;}
.k-main b{display:inline-block;direction:ltr;font-size:16px;margin-inline-end:8px;}
.k-dep{font-size:12px;font-weight:600;color:var(--muted);background:var(--bg-alt);border-radius:999px;padding:2px 9px;}
.k-main p{margin:6px 0 4px;font-size:13.5px;line-height:1.5;color:var(--ink-2);direction:ltr;text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.k-repo{font-family:var(--mono);font-size:11.5px;color:var(--muted-2);direction:ltr;display:block;text-align:left;}
.k-act{display:flex;gap:8px;flex-wrap:wrap;}
.k-act .ic{width:15px;height:15px;}
@media (max-width:760px){ .cat-list{grid-template-columns:minmax(0,1fr);} }
.sk-meta .ver .ic{width:15px;height:15px;color:var(--ok);display:inline-block;vertical-align:-2px;margin-inline-end:4px;}
.sk-meta .ver.ok{box-shadow:0 0 0 1px rgba(29,138,78,.25) inset;}
.trust{display:flex;gap:10px;align-items:flex-start;margin:0 0 18px;padding:12px 16px;border-radius:16px;background:rgba(29,138,78,.07);color:var(--ink-2);font-size:14.5px;line-height:1.55;}
.trust .ic{width:20px;height:20px;color:var(--ok);flex-shrink:0;margin-top:1px;}
.trust b{color:var(--ink);}
/* the two libraries as an iOS segmented control */
.seg-wrap{position:sticky;top:64px;z-index:50;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 1px 0 var(--hair);padding:12px 0;}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;max-width:720px;margin-inline:auto;padding:4px;border-radius:18px;background:#e9e9ee;}
.seg button{border:0;border-radius:14px;padding:10px 14px;background:transparent;font:inherit;font-size:16px;font-weight:700;color:var(--ink-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;transition:background .3s var(--ease),box-shadow .3s var(--ease),color .3s;}
.seg button small{font-size:12.5px;font-weight:500;color:var(--muted);}
.seg button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08),0 6px 16px rgba(0,0,0,.06);}
.tabpanel[hidden]{display:none;}
.tabpanel{padding-top:clamp(36px,5vw,64px);}
@media (max-width:1020px){ .seg-wrap{top:108px;} }
@media (max-width:560px){ .seg button{font-size:15px;padding:9px 8px;} .seg button small{font-size:11.5px;} }