/* 14l «أضفها لشاشتك»: the picker and the «add this one» sheet (kg-install.js). A bottom sheet on phones, a card in the
   middle on wide screens. Tokens from garden.css / dark.css, with fallbacks for pages that don't load them. */
.kgi{position:fixed;inset:0;z-index:2147483000;display:grid;align-items:end;justify-items:center;font-family:var(--font);color:var(--ink,#111315)}
.kgi-scrim{position:absolute;inset:0;background:var(--scrim,rgba(10,12,14,.30));opacity:0;transition:opacity .2s ease}
.kgi.is-in .kgi-scrim{opacity:1}
.kgi-panel{position:relative;width:100%;max-width:520px;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;box-sizing:border-box;
  padding:22px 20px calc(20px + env(safe-area-inset-bottom));border-radius:18px 18px 0 0;background:var(--paper,#fff);
  box-shadow:0 -12px 40px -16px rgba(15,20,25,.35);transform:translateY(24px);opacity:0;transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s ease;outline:none}
.kgi.is-in .kgi-panel{transform:none;opacity:1}
.kgi-panel::before{content:"";position:absolute;top:8px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:4px;background:var(--line-2,#DADCDF)}
@media (min-width:720px){
  .kgi{align-items:center}
  .kgi-panel{border-radius:16px;padding:26px 26px 24px;box-shadow:0 24px 60px -20px rgba(15,20,25,.4),0 0 0 1px var(--line,#ECEDEF);transform:translateY(10px) scale(.98)}
  .kgi-panel::before{display:none}
  .kgi-panel[data-view="pick"]{max-width:600px}
}
.kgi button{font-family:inherit}
.kgi svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.kgi-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.kgi-head > div:not(.kgi-phone){flex:1;min-width:0}
.kgi-head h2{margin:0 0 4px;font-weight:700;font-size:21px;line-height:1.3;color:var(--ink,#111315)}
.kgi-head p{margin:0;font-weight:400;font-size:15px;line-height:1.55;color:var(--ink-2,#3A3D41)}
.kgi-x{flex:none;display:grid;place-items:center;width:38px;height:38px;margin:-6px -6px 0 0;padding:0;border:0;border-radius:50%;background:none;color:var(--ink-2,#3A3D41);cursor:pointer}
.kgi-x:hover{background:var(--tile,#F6F6F7);color:var(--ink,#111315)}
.kgi :focus-visible{outline:2px solid var(--ink,#111315);outline-offset:2px}
.kgi .kgi-panel:focus-visible{outline:none}

/* the picker */
.kgi-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:8px}
.kgi-app{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px 12px;border:1px solid var(--line,#ECEDEF);border-radius:14px;background:var(--bg,#FDFDFD);
  color:inherit;font:inherit;text-align:center;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.kgi-app:hover{background:var(--tile,#F6F6F7);border-color:var(--line-2,#DADCDF)}
.kgi-app:active{transform:scale(.97)}
.kgi-app img{width:56px;height:56px;border-radius:14px;box-shadow:0 1px 2px rgba(15,20,25,.12),0 0 0 1px rgba(15,20,25,.06)}
.kgi-app b{font-weight:700;font-size:15px;line-height:1.3;color:var(--ink,#111315)}
.kgi-app small{display:inline-flex;align-items:center;gap:3px;font-weight:400;font-size:12.5px;line-height:1.35;color:var(--ink-3,#6B6F75);min-height:2.7em}
.kgi-app small svg{width:14px;height:14px;stroke-width:2.2;color:var(--g-sudoku,#2E8B57)}
.kgi-note{margin:14px 2px 0;font-weight:400;font-size:13.5px;line-height:1.5;color:var(--ink-3,#6B6F75)}
@media (max-width:380px){.kgi-grid{grid-template-columns:repeat(3,1fr)}.kgi-app{padding-inline:2px}.kgi-app small{font-size:12px}}

/* one app */
.kgi-head-app{align-items:center}
.kgi-phone{flex:none;position:relative;width:74px;height:118px;box-sizing:border-box;padding:16px 7px 8px;border:2px solid var(--ink,#111315);border-radius:16px;background:var(--tile,#F6F6F7);display:flex;flex-direction:column;align-items:center}
.kgi-notch{position:absolute;top:5px;left:50%;width:18px;height:4px;margin-left:-9px;border-radius:3px;background:var(--ink,#111315)}
.kgi-dots{display:grid;grid-template-columns:repeat(3,16px);gap:5px}
.kgi-dots i{width:16px;height:16px;border-radius:5px;background:var(--line-2,#DADCDF)}
.kgi-dots img{width:16px;height:16px;border-radius:5px;transform:scale(1.4);box-shadow:0 2px 6px rgba(15,20,25,.25);animation:kgi-pop 1.6s cubic-bezier(.3,1.35,.5,1) .25s both}
.kgi-phone span{margin-top:auto;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:700;font-size:9px;line-height:1.2;color:var(--ink-2,#3A3D41)}
@keyframes kgi-pop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.6);opacity:1}100%{transform:scale(1.4)}}
@media (prefers-reduced-motion:reduce){.kgi-dots img{animation:none}.kgi-panel,.kgi-scrim{transition:none}}
.kgi-body{display:flex;flex-direction:column;gap:12px}
.kgi-go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;border:0;border-radius:var(--r-pill,999px);background:var(--ink,#111315);color:var(--bg,#fff);font-weight:700;font-size:17px;line-height:1;cursor:pointer}
.kgi-go:hover{filter:brightness(1.15)}
.kgi-ghost{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border:1px solid var(--line-2,#DADCDF);border-radius:var(--r-pill,999px);background:none;color:var(--ink,#111315);font-weight:700;font-size:14px;line-height:1;cursor:pointer}
.kgi-small,.kgi-p{margin:0;font-weight:400;font-size:14px;line-height:1.6;color:var(--ink-2,#3A3D41)}
.kgi-small{text-align:center;color:var(--ink-3,#6B6F75);font-size:13px}
.kgi-p{font-size:15px}
.kgi-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.kgi-step{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--tile,#F6F6F7)}
.kgi-num{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink,#111315);color:var(--bg,#fff);font-weight:700;font-size:14px;line-height:1}
.kgi-st{flex:1;font-weight:500;font-size:15px;line-height:1.5;color:var(--ink,#111315)}
.kgi-chip{flex:none;display:inline-flex;align-items:center;gap:2px;min-width:40px;height:40px;justify-content:center;padding:0 6px;box-sizing:border-box;border-radius:11px;background:var(--paper,#fff);
  box-shadow:0 0 0 1px var(--line,#ECEDEF),0 2px 6px -3px rgba(15,20,25,.25);color:#0A84FF;font-weight:700;font-size:18px;line-height:1}
.kgi-chip:empty{display:none}
.kgi-chip svg{width:22px;height:22px}
.kgi-done{display:flex;align-items:center;gap:12px;padding:16px;border-radius:14px;background:var(--g-sudoku-wash,#DDEFE2);color:var(--g-sudoku-ink,#1F6B43)}
.kgi-done svg{width:28px;height:28px;stroke-width:2.4}
.kgi-done p{margin:0;font-weight:400;font-size:15px;line-height:1.55}
.kgi-done b{font-weight:700}
.kgi-link{display:inline-flex;align-items:center;gap:4px;margin-top:14px;padding:6px 2px;border:0;background:none;color:var(--ink-2,#3A3D41);font-weight:500;font-size:14px;line-height:1;cursor:pointer}
.kgi-link svg{width:16px;height:16px}
.kgi-link:hover{color:var(--ink,#111315)}
html.kgi-open{overflow:hidden}

/* the workshop's button (under the hello) */
.kgi-cta-row{margin:18px 0 0;font-family:var(--font)}
.kgi-cta{font-family:inherit}
.kgi-cta{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 8px 0 16px;border:1px solid var(--line-2,#DADCDF);border-radius:var(--r-pill,999px);background:var(--paper,#fff);color:var(--ink,#111315);
  font-weight:700;font-size:15px;line-height:1;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s}
.kgi-cta:hover{border-color:var(--ink-3,#6B6F75);box-shadow:0 6px 16px -10px rgba(15,20,25,.35)}
.kgi-stack{display:inline-flex;flex-direction:row-reverse}
.kgi-stack img{width:30px;height:30px;box-shadow:0 0 0 2px var(--paper,#fff),0 1px 3px rgba(15,20,25,.2);margin-inline-start:-5px;transition:transform .2s cubic-bezier(.3,1.35,.5,1)}
.kgi-stack img:last-child{margin-inline-start:0}
.kgi-cta:hover .kgi-stack img:nth-child(1){transform:translateY(-2px) rotate(-6deg)}
.kgi-cta:hover .kgi-stack img:nth-child(3){transform:translateY(-2px) rotate(6deg)}
.kgi-cta small{font-weight:400;font-size:13px;line-height:1;color:var(--ink-3,#6B6F75)}

/* the site's look squares every corner (garden.css `* {border-radius:0!important}`), then gives cards and controls
   its own small radii; these follow it, and the icons keep an app icon's rounded square */
html .kgi .kgi-panel{border-radius:var(--r-card,8px) var(--r-card,8px) 0 0!important}
@media (min-width:720px){html .kgi .kgi-panel{border-radius:var(--r-card,8px)!important}}
html .kgi :is(.kgi-app,.kgi-step,.kgi-done){border-radius:var(--r-card,8px)!important}
html :is(.kgi,.kgi-cta-row) :is(.kgi-go,.kgi-ghost,.kgi-chip,.kgi-cta){border-radius:var(--r-ctl,6px)!important}
html .kgi :is(.kgi-x,.kgi-num){border-radius:50%!important}
html :is(.kgi,.kgi-cta-row) :is(.kgi-app img,.kgi-dots img,.kgi-stack img){border-radius:22.5%!important}
html .kgi .kgi-dots i{border-radius:30%!important}
html .kgi .kgi-phone{border-radius:14px!important}
html .kgi .kgi-notch{border-radius:3px!important}
html .kgi .kgi-panel::before{border-radius:3px!important}